/**
 * Ceylans Bestellsystem — Stylesheet
 * Farbschema: Dunkelblau (#1a1a2e) + Gold-Akzent (#c8a951)
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --primary: #1a1a2e;
    --primary-light: #2d2d44;
    --primary-dark: #12121f;
    --accent: #c8a951;
    --accent-light: #d4ba6e;
    --accent-dark: #b0923e;

    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    --bg: #f8f9fa;
    --bg-card: #ffffff;
    --bg-sidebar: #1a1a2e;

    --text: #1f2937;
    --text-secondary: #6b7280;
    --text-light: #9ca3af;
    --text-white: #ffffff;

    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --bg-secondary: #f1f5f9;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);

    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --sidebar-width: 260px;
    --header-height: 60px;
    --bottom-nav-height: 64px;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --transition: 0.2s ease;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent-dark); text-decoration: none; }
a:hover { color: var(--accent); }

img { max-width: 100%; height: auto; }

/* ============================================
   LOADING SCREEN
   ============================================ */
.loading-screen {
    position: fixed;
    inset: 0;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loading-logo {
    text-align: center;
}

.loading-logo img {
    border-radius: 20px;
    margin-bottom: 24px;
}

.loading-spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   LOGIN SCREEN
   ============================================ */
/* ============================================
   LOGIN - Split-Layout (eRechnung-Stil)
   ============================================ */
.login-container {
    min-height: 100dvh;
    display: flex;
    flex-direction: row;
}

.login-image-side {
    flex: 1;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 48px;
}

.login-image-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.55) 100%);
}

.login-image-side .login-branding {
    position: relative;
    z-index: 1;
    color: #fff;
}

.login-image-side .login-branding h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.login-image-side .login-branding p {
    font-size: 1rem;
    font-weight: 300;
    opacity: 0.85;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.login-form-side {
    width: 480px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: #fff;
}

.login-form-wrapper {
    width: 100%;
    max-width: 340px;
}

.login-logo {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo img {
    max-width: 200px;
    height: auto;
}

.login-form {
    width: 100%;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form .form-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
}

.login-form .login-input-wrap {
    position: relative;
}

.login-form .login-input-wrap .login-icon-left {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--text-light);
    pointer-events: none;
    line-height: 1;
}

.login-form .login-input-wrap input {
    width: 100%;
    padding: 12px 44px 12px 42px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 0.9375rem;
    color: var(--text);
    background: var(--bg);
    transition: border-color var(--transition), box-shadow var(--transition);
    box-sizing: border-box;
}

.login-form .login-input-wrap input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200, 169, 81, 0.15);
}

.login-form .login-toggle-pw {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    z-index: 2;
    line-height: 1;
}

.login-form .login-toggle-pw .material-icons-round {
    font-size: 20px;
    line-height: 1;
}

.login-form .login-toggle-pw:hover {
    color: var(--text-secondary);
}

.login-form .btn-login {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--radius);
    background: #e44f4a;
    color: #fff;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-form .btn-login:hover {
    background: #195839;
    transform: translateY(-1px);
}

.login-form .forgot-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 0.8125rem;
    color: var(--text-light);
    text-decoration: none;
}

.login-form .forgot-link:hover {
    color: var(--accent);
}

.login-form .form-error {
    background: #fef2f2;
    color: var(--danger);
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    margin-bottom: 16px;
    display: none;
}

/* Mobile: Bild oben, Form unten */
@media (max-width: 768px) {
    .login-container {
        flex-direction: column;
    }
    .login-image-side {
        min-height: 200px;
        flex: none;
        padding: 24px;
    }
    .login-image-side .login-branding h1 {
        font-size: 1.4rem;
    }
    .login-form-side {
        width: 100%;
        flex: 1;
        padding: 32px 24px;
    }
}

/* Ohne Hintergrundbild: volle Breite Form */
.login-container.no-bg-image {
    justify-content: center;
}

.login-container.no-bg-image .login-image-side {
    display: none;
}

.login-container.no-bg-image .login-form-side {
    width: 100%;
    max-width: 480px;
    background: transparent;
}

/* ============================================
   FORMS
   ============================================ */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
}

/* input-icon for general forms (not login) */
.input-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon .material-icons-round:first-child {
    position: absolute;
    left: 12px;
    color: var(--text-light);
    font-size: 20px;
    pointer-events: none;
}

.input-icon input {
    width: 100%;
    padding: 10px 12px 10px 42px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 0.9375rem;
    color: var(--text);
    background: var(--bg);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.input-icon input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200, 169, 81, 0.15);
}

input, select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 0.9375rem;
    color: var(--text);
    background: var(--bg-card);
    transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200, 169, 81, 0.15);
}

/* General form error */
.form-error {
    background: #fef2f2;
    color: var(--danger);
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    margin-bottom: 16px;
    border: 1px solid #fecaca;
}

/* ============================================
   EXCEL-TABELLE
   ============================================ */
.excel-table-wrap {
    border: 1px solid #d1d5db;
    border-radius: var(--radius);
    overflow-x: auto;
    background: #fff;
}

.excel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.excel-table thead th {
    background: #f3f4f6;
    border-bottom: 2px solid #d1d5db;
    padding: 8px 10px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #374151;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.excel-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.1s;
}

.excel-table tbody tr:hover {
    background: #f9fafb;
}

.excel-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.excel-table tbody tr:nth-child(even):hover {
    background: #f3f4f6;
}

.excel-table td {
    padding: 6px 10px;
    border-right: 1px solid #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.excel-table td:last-child {
    border-right: none;
}

.excel-table .cell-num {
    text-align: center;
    color: #9ca3af;
    font-size: 0.6875rem;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
}

.excel-table .cell-sku {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    color: #6b7280;
}

.excel-table .cell-name {
    font-weight: 500;
}

.excel-table .cell-center {
    text-align: center;
}

.excel-table .row-inactive {
    opacity: 0.5;
}

.excel-table .row-stock-low td {
    background: #fef2f2 !important;
}

.excel-table .row-selected td {
    background: #dbeafe !important;
}

.btn-icon-sm {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.btn-icon-sm:hover {
    background: rgba(0,0,0,0.05);
}

.btn-sm {
    font-size: 0.8125rem;
    padding: 6px 12px;
}

.btn-success {
    background: var(--success);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn-primary {
    background: var(--accent);
    color: var(--primary);
}
.btn-primary:hover { background: var(--accent-light); }

.btn-secondary {
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--border);
}
.btn-secondary:hover { background: var(--border-light); }

.btn-danger {
    background: var(--danger);
    color: white;
}
.btn-danger:hover { background: #dc2626; }

.btn-success {
    background: var(--success);
    color: white;
}
.btn-success:hover { background: #16a34a; }

.btn-block { width: 100%; }

.btn-sm { padding: 6px 14px; font-size: 0.8125rem; }

.btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border);
}

.btn-outline:hover {
    background: var(--bg);
    color: var(--text);
    border-color: var(--text-light);
}
.btn-lg { padding: 12px 28px; font-size: 1rem; }

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}
.btn-icon:hover { background: rgba(0,0,0,0.05); color: var(--text); }

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner-small {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0,0,0,0.15);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}

/* ============================================
   APP LAYOUT
   ============================================ */
.app {
    display: flex;
    min-height: 100dvh;
}

/* HEADER */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.notification-btn {
    position: relative;
}

.badge, .nav-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--danger);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.nav-badge {
    position: static;
    margin-left: auto;
}

/* USER MENU */
.user-menu { position: relative; }

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    z-index: 200;
}

.dropdown-header {
    padding: 14px 16px;
}

.dropdown-header strong {
    display: block;
    font-size: 0.875rem;
}

.dropdown-header small {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
}

.user-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 0.875rem;
    color: var(--text);
    transition: background var(--transition);
}

.user-dropdown a:hover {
    background: var(--bg);
}

.user-dropdown a .material-icons-round {
    font-size: 20px;
    color: var(--text-secondary);
}

.text-danger { color: var(--danger) !important; }
.text-danger .material-icons-round { color: var(--danger) !important; }

/* ============================================
   SIDEBAR — Offcanvas (immer versteckt, gleitet rein)
   ============================================ */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100dvh;
    background: var(--bg-sidebar);
    color: var(--text-white);
    z-index: 300;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.3);
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    z-index: 299;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.sidebar-header img { border-radius: 8px; }

.sidebar-brand {
    font-weight: 600;
    font-size: 1.125rem;
    flex: 1;
}

.sidebar-close {
    color: rgba(255,255,255,0.5);
}
.sidebar-close:hover {
    color: var(--text-white);
    background: rgba(255,255,255,0.1);
}

.sidebar-nav {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;
}

.nav-group-label {
    display: block;
    padding: 16px 20px 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.35);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    font-weight: 400;
    transition: all var(--transition);
    border-left: 3px solid transparent;
}

.nav-item:hover {
    color: var(--text-white);
    background: rgba(255,255,255,0.05);
}

.nav-item.active {
    color: var(--accent);
    background: rgba(200, 169, 81, 0.08);
    border-left-color: var(--accent);
    font-weight: 500;
}

.nav-item .material-icons-round {
    font-size: 22px;
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.3);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main-content {
    flex: 1;
    margin-top: var(--header-height);
    padding: 24px;
    min-height: calc(100dvh - var(--header-height));
}

.page-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* ============================================
   BOTTOM NAV (Mobile)
   ============================================ */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--text-secondary);
    font-size: 0.625rem;
    font-weight: 500;
    position: relative;
    transition: color var(--transition);
}

.bottom-nav-item .material-icons-round {
    font-size: 24px;
}

.bottom-nav-item.active {
    color: var(--accent-dark);
}

/* ============================================
   CARDS
   ============================================ */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.card-body {
    padding: 20px;
}

.card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

/* ============================================
   STATS CARDS (Dashboard)
   ============================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: var(--shadow-sm);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon .material-icons-round { font-size: 24px; }

.stat-icon.blue { background: #eff6ff; color: var(--info); }
.stat-icon.green { background: #f0fdf4; color: var(--success); }
.stat-icon.yellow { background: #fffbeb; color: var(--warning); }
.stat-icon.red { background: #fef2f2; color: var(--danger); }
.stat-icon.gold { background: #fef9ee; color: var(--accent-dark); }

.stat-content h4 {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

/* ============================================
   TABLES
   ============================================ */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

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

table th {
    padding: 10px 16px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

table td {
    padding: 12px 16px;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text);
}

table tr:hover td {
    background: var(--bg);
}

/* ============================================
   STATUS BADGES
   ============================================ */
.badge-inline, .badge-info, .badge-warning, .badge-success, .badge-danger, .badge-secondary {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-info { background: #dbeafe; color: #1e40af; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-success { background: #dcfce7; color: #166534; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-secondary { background: var(--bg); color: var(--text-secondary); }

.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.status-new { background: #eff6ff; color: #2563eb; }
.status-confirmed { background: #f0fdf4; color: #16a34a; }
.status-in_production { background: #fffbeb; color: #d97706; }
.status-produced { background: #f0fdf4; color: #16a34a; }
.status-ready_for_delivery { background: #fef9ee; color: var(--accent-dark); }
.status-delivered { background: #f0fdf4; color: #16a34a; }
.status-invoiced { background: #eff6ff; color: #2563eb; }
.status-cancelled { background: #fef2f2; color: #dc2626; }
.status-pending { background: #fffbeb; color: #d97706; }
.status-in_progress { background: #eff6ff; color: #2563eb; }
.status-completed { background: #f0fdf4; color: #16a34a; }
.status-on_hold { background: #fef2f2; color: #dc2626; }
.status-draft { background: var(--bg); color: var(--text-secondary); }
.status-sent { background: #eff6ff; color: #2563eb; }
.status-paid { background: #f0fdf4; color: #16a34a; }
.status-overdue { background: #fef2f2; color: #dc2626; }

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-container {
    position: fixed;
    top: 76px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    min-width: 300px;
    max-width: 420px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--info);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: slideIn 0.3s ease;
    font-size: 0.875rem;
}

.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }

.toast-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    padding: 0;
    line-height: 1;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

.empty-state .material-icons-round {
    font-size: 64px;
    color: var(--border);
    margin-bottom: 16px;
}

.empty-state h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 0.875rem;
    margin-bottom: 20px;
}

/* ============================================
   DATA TABLES
   ============================================ */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table thead th {
    background: var(--bg);
    padding: 10px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1.5px solid var(--border);
    white-space: nowrap;
}

.data-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background: rgba(0,0,0,0.015);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: fadeIn 0.2s ease;
}

.modal {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 520px;
    max-height: 90dvh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: scaleIn 0.2s ease;
}

.modal.modal-large {
    max-width: 720px;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 { font-size: 1.125rem; font-weight: 600; }

.modal-body { padding: 24px; }
.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============================================
   UTILITIES
   ============================================ */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.text-center { text-align: center; }
.hidden { display: none !important; }

/* ============================================
   RESPONSIVE — Desktop
   ============================================ */
@media (min-width: 1024px) {
    .bottom-nav-admin { display: none !important; }
}

/* Customer mode: bottom nav ALWAYS visible, no sidebar, logo in header */
body.customer-mode .sidebar,
body.customer-mode #sidebar { display: none !important; }
body.customer-mode .sidebar-overlay,
body.customer-mode #sidebar-overlay { display: none !important; }
body.customer-mode .customer-bottom-nav,
body.customer-mode #customer-bottom-nav { display: flex !important; }
body.customer-mode .bottom-nav-admin,
body.customer-mode #bottom-nav { display: none !important; }
body.customer-mode .menu-toggle { display: none !important; }
body.customer-mode #page-title { display: none !important; }
body.customer-mode #customer-header-logo { display: block !important; }
body.customer-mode .main-content {
    margin-left: 0 !important;
    padding-bottom: calc(var(--bottom-nav-height) + 16px + env(safe-area-inset-bottom)) !important;
}
body.customer-mode .app-header {
    left: 0 !important;
}

/* Customer bottom nav styling */
.customer-bottom-nav {
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}
.customer-bottom-nav .bottom-nav-item {
    font-size: 0.625rem;
    font-weight: 600;
    gap: 2px;
    color: #9ca3af;
    transition: color 0.15s ease, transform 0.15s ease;
}
.customer-bottom-nav .bottom-nav-item.active {
    color: var(--accent-dark);
}
.customer-bottom-nav .bottom-nav-item .material-icons-round {
    font-size: 22px;
}

/* ============================================
   CUSTOMER AREA — Dokumente & Konto
   ============================================ */

/* Dokumente Tabs */
.cdoc-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}
.cdoc-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 12px;
    border: none;
    background: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.cdoc-tab .material-icons-round { font-size: 20px; }
.cdoc-tab.active {
    background: var(--accent-dark);
    color: #fff;
}
.cdoc-tab:not(.active):hover { background: var(--bg-hover); }

/* Dokument-Liste */
.cdoc-list { display: flex; flex-direction: column; gap: 8px; }
.cdoc-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.1s;
}
.cdoc-card:active { transform: scale(0.98); }
.cdoc-card:hover { box-shadow: var(--shadow-md); }
.cdoc-card-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cdoc-card-icon.ls { background: #ecfdf5; color: #16a34a; }
.cdoc-card-icon.re { background: #eff6ff; color: #2563eb; }
.cdoc-card-icon .material-icons-round { font-size: 22px; }
.cdoc-card-info { flex: 1; min-width: 0; }
.cdoc-card-title { font-weight: 700; font-size: 0.9375rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cdoc-card-sub { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 2px; }
.cdoc-card-arrow { color: #d1d5db; font-size: 20px; flex-shrink: 0; }
.cdoc-status {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.cdoc-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}
.cdoc-empty .material-icons-round { font-size: 48px; color: #d1d5db; display: block; margin-bottom: 12px; }

/* Dokument-Detail Tabelle */
.cdoc-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.cdoc-table th { text-align: left; padding: 10px 6px; font-size: 0.75rem; color: var(--text-secondary); border-bottom: 2px solid var(--border-dark); }
.cdoc-table td { padding: 10px 6px; font-size: 0.875rem; border-bottom: 1px solid var(--border); }
.cdoc-table tfoot td { border-top: 2px solid var(--border-dark); border-bottom: none; }

/* Rechnungssummen */
.cdoc-totals { border-top: 2px solid var(--border-dark); padding-top: 12px; }
.cdoc-total-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.875rem; }
.cdoc-total-row.total { font-weight: 700; font-size: 1.0625rem; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }

/* Customer Orders — Card Layout */
.cord-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 16px;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.1s;
}
.cord-card:active { transform: scale(0.98); }
.cord-card:hover { box-shadow: var(--shadow-md); }
.cord-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.cord-card-nr { font-family: monospace; font-weight: 700; font-size: 0.9375rem; }
.cord-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}
.cord-card-body { display: flex; flex-direction: column; gap: 4px; }
.cord-card-row { display: flex; justify-content: space-between; font-size: 0.8125rem; }
.cord-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.cord-sum-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 0.875rem; }
.cord-sum-total { font-weight: 700; font-size: 1.0625rem; border-top: 2px solid var(--border-dark); padding-top: 10px; margin-top: 4px; }

/* Customer Dashboard Cards */
.cdash-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 18px 16px;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.1s;
}
.cdash-card:active { transform: scale(0.97); }
.cdash-card:hover { box-shadow: var(--shadow-md); }
.cdash-card-label { font-weight: 700; font-size: 0.875rem; margin-top: 10px; }
.cdash-card-action { font-size: 0.8125rem; color: #6b7280; margin-top: 2px; }

/* Konto */
.cact-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    margin-bottom: 16px;
}
.cact-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--accent-dark);
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cact-name { font-weight: 700; font-size: 1.125rem; }
.cact-sub { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 2px; }
.cact-field {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
}
.cact-field:last-child { border-bottom: none; }
.cact-label { color: var(--text-secondary); font-weight: 500; }
.cact-form-grid { display: flex; gap: 12px; }
.cact-form-grid .form-group { flex: 1; }

/* ============================================
   RESPONSIVE — Tablet & Mobile
   ============================================ */
@media (max-width: 1023px) {
    .bottom-nav-admin {
        display: flex;
    }

    body.customer-mode .bottom-nav-admin { display: none !important; }

    .main-content {
        padding: 16px;
        padding-bottom: calc(var(--bottom-nav-height) + 16px + env(safe-area-inset-bottom));
    }

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

    .stat-card { padding: 16px; }
    .stat-value { font-size: 1.5rem; }

    .toast-container {
        left: 16px;
        right: 16px;
    }

    .toast {
        min-width: unset;
        max-width: unset;
    }
}

@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
    }

    .stat-icon .material-icons-round {
        font-size: 20px;
    }
}

/* ===== ORDER SHOP (RESPONSIVE) ===== */

/* Admin-Bar */
.os-admin-bar{padding:10px 14px;background:var(--sd-admin-bar-bg,#1e40af);color:var(--sd-admin-bar-text,#fff);border-radius:8px;margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:0.85rem}
.os-admin-select{padding:5px 8px;border-radius:6px;border:1px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.15);color:inherit;font-size:0.85rem;min-width:160px;max-width:100%}
.os-admin-badge{background:rgba(255,255,255,0.2);padding:3px 10px;border-radius:10px;font-size:0.75rem}

/* Top Bar */
.os-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.os-title{margin:0;font-size:1.2rem}
.os-search-wrap{position:relative}
.os-search-input{padding:7px 10px 7px 34px;border:1px solid #d1d5db;border-radius:8px;font-size:0.85rem;width:200px}
.os-search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:17px;color:#9ca3af}

/* Category Tabs */
.os-cat-row{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;-webkit-overflow-scrolling:touch}
.os-cat-btn{padding:6px 14px;border:1px solid var(--sd-cat-border,#d1d5db);border-radius:20px;background:var(--sd-cat-bg,#fff);font-size:0.8rem;cursor:pointer;white-space:nowrap;transition:all 0.15s;color:var(--sd-cat-text,#4b5563)}
.os-cat-btn:hover{opacity:0.85}
.os-cat-btn.active{background:var(--sd-cat-bg-active,#1e40af);color:var(--sd-cat-text-active,#fff);border-color:var(--sd-cat-bg-active,#1e40af)}

/* Product Row */
.os-row{background:var(--sd-row-bg,#fff);border:1px solid var(--sd-row-border,#e5e7eb);border-radius:8px;padding:10px 14px;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:background 0.15s}
.os-row:hover{background:var(--sd-row-bg-hover,#f0f4ff)}
.os-row.in-cart{background:var(--sd-row-bg-incart,#eff6ff);border:2px solid var(--sd-row-border-incart,#3b82f6)}
.os-row.in-cart:hover{background:var(--sd-row-bg-incart,#eff6ff)}
.os-row-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.os-sku{color:var(--sd-product-sku-color,#9ca3af);font-size:0.75rem;font-family:monospace;white-space:nowrap}
.os-name{color:var(--sd-product-name-color,#1f2937);font-size:var(--sd-product-name-size,0.9rem);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-cat{color:var(--sd-product-cat-color,#6b7280);font-size:0.75rem;white-space:nowrap}
.os-row-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.os-row-price{display:flex;align-items:center;gap:4px;white-space:nowrap}
.os-price{color:var(--sd-product-price-color,#1f2937)}
.os-price-old{text-decoration:line-through;color:#9ca3af;font-size:0.8rem}
.os-price-special{color:var(--sd-product-special-color,#dc2626)}
.os-unit{color:var(--sd-product-unit-color,#6b7280);font-size:0.8rem}
.os-stock-hint{font-size:0.7rem;color:#9ca3af}

/* Add Button */
.os-add-btn{background:var(--sd-add-btn-bg,#1e40af);color:var(--sd-add-btn-text,#fff);border:none;padding:6px 14px;border-radius:var(--sd-add-btn-radius,6px);font-size:0.8rem;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:4px;transition:opacity 0.15s}
.os-add-btn:hover{opacity:0.9}

/* Qty Controls */
.os-qty-row{display:flex;align-items:center;gap:4px}
.os-qty-btn{background:var(--sd-qty-btn-bg,#fff);color:var(--sd-qty-btn-text,#374151);border:1px solid var(--sd-qty-btn-border,#d1d5db);width:32px;height:32px;border-radius:6px;cursor:pointer;font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:background 0.15s}
.os-qty-btn:hover{background:#f3f4f6}
.os-qty-input{width:52px;height:32px;text-align:center;border:1px solid var(--sd-qty-input-border,#d1d5db);border-radius:6px;font-size:0.85rem;font-weight:600}
.os-qty-input::-webkit-inner-spin-button,.os-qty-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.os-qty-unit{color:var(--sd-product-unit-color,#6b7280);font-size:0.8rem;margin-left:2px}

/* Floating Cart */
.os-cart-float{position:fixed;bottom:80px;right:20px;width:56px;height:56px;border-radius:50%;background:var(--sd-cart-float-bg,#1e40af);color:var(--sd-cart-float-text,#fff);display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,0.3);z-index:200;transition:transform 0.2s}
.os-cart-float.visible{display:flex}
.os-cart-float:hover{transform:scale(1.08)}
.os-cart-badge{position:absolute;top:-4px;right:-4px;background:var(--sd-cart-float-badge-bg,#dc2626);color:var(--sd-cart-float-badge-text,#fff);width:22px;height:22px;border-radius:50%;font-size:0.7rem;font-weight:700;display:flex;align-items:center;justify-content:center}

/* Cart Overlay + Panel */
.os-cart-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(2px);z-index:290}
.os-cart-overlay.open{display:block}
.os-cart-panel{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:100vw;background:#fff;z-index:300;display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,0.15);transform:translateX(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1)}
.os-cart-panel.open{transform:translateX(0)}
.os-cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:8px;text-align:center;color:#6b7280}
.os-cart-empty h3{margin:0;color:#374151}
.os-cart-empty p{margin:0}
.os-cart-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #e5e7eb;background:var(--sd-cart-header-bg,#fff)}
.os-cart-header h3{margin:0;font-size:1.05rem;color:var(--sd-cart-header-text,#1f2937)}
.os-cart-close{background:none;border:none;cursor:pointer;padding:4px;color:#6b7280}
.os-cart-body{flex:1;overflow-y:auto;padding:10px 16px;background:var(--sd-cart-body-bg,#fff);-webkit-overflow-scrolling:touch}
.os-cart-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--sd-cart-item-border,#f3f4f6);border-radius:6px;margin-bottom:2px}
.os-cart-item:nth-child(odd){background:#f8fafc}
.os-cart-item:nth-child(even){background:#ffffff}
.os-cart-item-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.os-cart-item-info strong{font-size:0.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-cart-item-info span{color:#6b7280;font-size:0.8rem}
.os-cart-item-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.os-cart-remove{background:none;border:none;cursor:pointer;color:#dc2626;padding:2px}
.os-cart-footer{padding:14px 16px;border-top:1px solid #e5e7eb;background:var(--sd-cart-footer-bg,#f9fafb)}
.os-cart-line{display:flex;justify-content:space-between;font-size:0.85rem;margin-bottom:3px}
.os-cart-discount{color:var(--sd-cart-discount-color,#059669)}
.os-cart-total{font-weight:700;font-size:1rem;margin-top:6px;padding-top:6px;border-top:2px solid var(--sd-cart-total-border,#d1d5db)}
.os-cart-fields{margin-top:10px}
.os-cart-fields label{font-size:0.8rem;color:#6b7280;display:block;margin-bottom:3px}
.os-cart-fields input,.os-cart-fields textarea{width:100%;padding:7px;border:1px solid #d1d5db;border-radius:6px;font-size:0.85rem;margin-bottom:6px;box-sizing:border-box}
.os-cart-fields textarea{resize:none}
.os-cart-details{margin-bottom:6px;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}
.os-cart-details summary{padding:8px 12px;font-size:0.8125rem;font-weight:600;color:#4b5563;cursor:pointer;list-style:none;display:flex;align-items:center;background:#f9fafb;user-select:none}
.os-cart-details summary::-webkit-details-marker{display:none}
.os-cart-details summary::after{content:'\e5cf';font-family:'Material Icons Round';margin-left:auto;font-size:18px;transition:transform .2s}
.os-cart-details[open] summary::after{transform:rotate(180deg)}
.os-cart-details[open] summary{border-bottom:1px solid #e5e7eb}
.os-cart-details textarea{border:none;border-radius:0;margin:0;padding:10px 12px;font-size:0.85rem}
.os-order-btn{width:100%;padding:11px;font-size:0.95rem;background:var(--sd-order-btn-bg,#1e40af);color:var(--sd-order-btn-text,#fff);border:none;border-radius:var(--sd-order-btn-radius,8px);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;transition:opacity 0.15s}
.os-order-btn:hover{opacity:0.9}

/* Success Page */
.os-success{text-align:center;padding:48px 20px}
.os-success-icon{font-size:72px;color:var(--sd-success-icon-color,#059669)}
.os-success-title{margin:16px 0 8px;color:var(--sd-success-title-color,#059669)}
.os-success p{color:#6b7280;font-size:1rem;margin-bottom:4px}
.os-success-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.os-success-btn{background:var(--sd-success-btn-bg,#1e40af);color:var(--sd-success-btn-text,#fff);border:none;padding:10px 24px;border-radius:8px;font-size:0.95rem;cursor:pointer}

/* ===== RESPONSIVE MOBILE ===== */
@media(max-width:640px){
    /* Admin Bar stacked */
    .os-admin-bar{flex-direction:column;align-items:flex-start;gap:8px}
    .os-admin-select{width:100%;min-width:0}

    /* Search full width */
    .os-topbar{flex-direction:column;align-items:stretch}
    .os-search-input{width:100%;box-sizing:border-box}

    /* Cat tabs scroll horizontal */
    .os-cat-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;gap:6px}
    .os-cat-btn{flex-shrink:0;padding:6px 12px}

    /* Product Row: 2-line layout */
    .os-row{flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px}
    .os-row-info{flex-wrap:wrap;gap:4px 8px}
    .os-name{white-space:normal;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
    .os-row-right{justify-content:space-between}
    .os-row-price{gap:6px}

    /* Cart float above bottom nav */
    .os-cart-float{bottom:90px;right:16px;width:52px;height:52px}

    /* Cart panel full width */
    .os-cart-panel{width:100%;max-width:100vw}

    /* Success page smaller */
    .os-success{padding:32px 16px}
    .os-success-icon{font-size:56px}
}

@media(max-width:360px){
    .os-row-right{flex-direction:column;align-items:flex-start;gap:6px}
    .os-add-btn{width:100%;justify-content:center}
    .os-qty-row{width:100%}
    .os-qty-input{flex:1}
}

/* ===== SHOP-DESIGN EDITOR ===== */
.sd-section{background:#fff;border:1px solid #e5e7eb;border-radius:10px;margin-bottom:10px;overflow:hidden}
.sd-section.collapsed .sd-section-body{display:none}
.sd-section.collapsed .sd-chevron{transform:rotate(-90deg)}
.sd-section-header{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;user-select:none;transition:background 0.15s}
.sd-section-header:hover{background:#f9fafb}
.sd-section-icon{font-size:20px;color:#6b7280}
.sd-section-title{font-weight:600;font-size:0.9rem;flex:1}
.sd-chevron{font-size:20px;color:#9ca3af;transition:transform 0.2s}
.sd-section-body{padding:12px 16px;border-top:1px solid #f3f4f6;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.sd-field{display:flex;flex-direction:column;gap:4px}
.sd-label{font-size:0.75rem;color:#6b7280;font-weight:500}
.sd-color-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sd-color-input{width:36px;height:30px;border:1px solid #d1d5db;border-radius:6px;padding:1px;cursor:pointer;background:none}
.sd-hex-input{width:80px;height:30px;font-size:0.8rem;font-family:monospace;border:1px solid #d1d5db;border-radius:6px;padding:0 8px;text-transform:uppercase}
.sd-preview{width:30px;height:30px;border-radius:6px;border:1px solid #d1d5db;flex-shrink:0}
.sd-reset-btn{background:none;border:1px solid #d1d5db;border-radius:6px;width:28px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#9ca3af;transition:all 0.15s}
.sd-reset-btn:hover{background:#fef2f2;color:#dc2626;border-color:#fca5a5}
.sd-text-input{height:30px;border:1px solid #d1d5db;border-radius:6px;padding:0 10px;font-size:0.85rem;width:100%}
.sd-size-input{width:140px}
.sd-inline-preview{display:inline-block;padding:2px 8px;background:#f8f9fa;border:1px solid #e5e7eb;border-radius:4px;white-space:nowrap;transition:all 0.15s}

/* Farb-Palette (Shop-Design) v17.4 */
.sd-section-body.sd-single{grid-template-columns:1fr}
.sd-palette-top{display:flex;flex-direction:column;gap:8px}
.sd-palette-form{display:grid;grid-template-columns:140px 1fr auto;gap:10px;align-items:end}
.sd-palette-hint{font-size:0.78rem;color:#64748b}
.sd-palette-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:6px}
.sd-palette-empty{padding:10px 12px;border:1px dashed #cbd5e1;border-radius:10px;color:#64748b;background:#f8fafc;font-size:0.85rem}
.sd-palette-item{display:flex;align-items:center;gap:10px;padding:10px 10px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;cursor:pointer;transition:background 0.12s,border-color 0.12s}
.sd-palette-item:hover{background:#f8fafc;border-color:#cbd5e1}
.sd-palette-meta{min-width:0;flex:1}
.sd-palette-hex{font-family:monospace;font-weight:800;font-size:0.8rem;color:#0f172a}
.sd-palette-name{font-size:0.8rem;color:#475569;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-palette-act{border:1px solid #e5e7eb;background:#fff;border-radius:10px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#64748b;cursor:pointer;transition:all 0.12s;flex-shrink:0}
.sd-palette-act:hover{background:#f1f5f9;border-color:#cbd5e1;color:#334155}
.sd-palette-act.sd-palette-del:hover{background:#fef2f2;border-color:#fecaca;color:#dc2626}
.sd-palette-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.sd-palette-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;cursor:pointer;transition:background 0.12s,border-color 0.12s}
.sd-palette-chip:hover{background:#f8fafc;border-color:#cbd5e1}

@media(max-width:640px){
  .sd-palette-form{grid-template-columns:1fr}
}

/* Layout: links Einstellungen (fluid), rechts Vorschau (sticky) (v17.3) */
.sd-layout{display:grid;grid-template-columns:minmax(560px,1fr) 420px;gap:18px}
.sd-left{min-width:0}
.sd-right{min-width:0}
.sd-preview-panel{position:sticky;top:86px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px 14px 16px;box-shadow:0 10px 24px rgba(0,0,0,0.06);max-height:calc(100vh - 110px);overflow:auto;overscroll-behavior:contain}
#sd-preview-content{padding-bottom:6px}
.sd-preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.sd-preview-kicker{font-size:0.72rem;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:0.4px}
.sd-preview-title{font-size:1rem;font-weight:900;color:#111827}
.sd-preview-hint{font-size:0.78rem;color:#64748b;white-space:nowrap}
.sd-preview-note{margin-bottom:10px;padding:8px 10px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;color:#334155;font-size:0.82rem}
.sd-section.active{border-color:#1e40af}
.sd-section.active .sd-section-header{background:#eff6ff}

@media(max-width:1100px){
  .sd-layout{grid-template-columns:1fr 380px}
}

@media(max-width:960px){
  .sd-layout{grid-template-columns:1fr}
  .sd-preview-panel{position:relative;top:auto;max-height:none;overflow:visible}
  .sd-preview-hint{white-space:normal}
}


/* ===== PRODUCT MODAL ===== */
.pm-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);backdrop-filter:blur(2px);z-index:400;display:flex;align-items:center;justify-content:center;padding:16px}
.pm-modal{background:#fff;width:100%;max-width:380px;border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.2);animation:pmIn 0.2s ease-out}
@keyframes pmIn{from{transform:scale(0.95);opacity:0}to{transform:scale(1);opacity:1}}
.pm-head{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 16px 12px}
.pm-name{font-size:1rem;font-weight:700;color:#1f2937;line-height:1.3}
.pm-meta{display:flex;align-items:center;gap:8px;margin-top:3px;flex-wrap:wrap}
.pm-sku{font-size:0.75rem;color:#9ca3af;font-family:monospace}
.pm-price{font-size:0.9rem;font-weight:700;color:#1f2937}
.pm-price-unit{font-weight:400;color:#6b7280;font-size:0.8rem}
.pm-price-old{font-size:0.8rem;text-decoration:line-through;color:#9ca3af}
.pm-price-special{color:var(--sd-product-special-color,#dc2626)}
.pm-x{background:none;border:none;cursor:pointer;padding:2px;color:#9ca3af;flex-shrink:0}
.pm-body{padding:0 16px 12px}

/* Mockup: 3 visual tray buttons */
.pm-tray-visual{display:flex;gap:8px;margin:12px 0 8px}
.pm-tray-vbtn{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 4px 8px;border:1.5px solid #e5e7eb;border-radius:12px;background:#fff;cursor:pointer;transition:all 0.15s}
.pm-tray-vbtn:hover:not(.pm-tray-disabled){border-color:#93c5fd;background:#f0f7ff}
.pm-tray-vbtn.active{border-color:#1e40af;background:#eff6ff;box-shadow:0 0 0 1px #1e40af}
.pm-tray-vbtn.pm-tray-disabled{opacity:0.25;cursor:not-allowed;pointer-events:none}
.pm-tray-vimg{width:100%;height:50px;display:flex;align-items:center;justify-content:center}
.pm-tray-vimg svg{width:80%;height:auto;max-height:42px}
.pm-tray-vbtn.active .pm-tray-vimg svg ellipse,.pm-tray-vbtn.active .pm-tray-vimg svg path{stroke:#1e40af}
.pm-tray-vlbl{font-size:0.72rem;font-weight:600;color:#6b7280;margin-top:4px;white-space:nowrap}
.pm-tray-vbtn.active .pm-tray-vlbl{color:#1e40af}

/* Number row: 4 5 6 7 8 + Andere */
.pm-tray-nums{display:flex;gap:6px;margin-bottom:10px}
.pm-tray-num{flex:1;padding:8px 0;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.12s;color:#374151;text-align:center}
.pm-tray-num:hover:not(.pm-tray-disabled):not(:disabled){border-color:#93c5fd;background:#f0f7ff}
.pm-tray-num.active{background:#1e40af;color:#fff;border-color:#1e40af}
.pm-tray-num.pm-tray-disabled,.pm-tray-num:disabled{opacity:0.25;cursor:not-allowed}
.pm-tray-andere{font-size:0.7rem;color:#9ca3af;font-weight:500;letter-spacing:0.3px}
.pm-tray-andere.active{color:#fff}

/* Hinzufügen button on product rows */
.os-add-btn{padding:5px 12px;border:none;border-radius:var(--sd-add-btn-radius,6px);background:var(--sd-add-btn-bg,#1e40af);color:var(--sd-add-btn-text,#fff);font-size:0.75rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:opacity 0.12s;margin-left:6px;flex-shrink:0}
.os-add-btn:hover{opacity:0.85}

/* Info line */
.pm-info{margin-top:10px}
.pm-info-ok,.pm-info-err{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;font-size:0.82rem}
.pm-info-ok{background:#f0fdf4;border:1px solid #bbf7d0}
.pm-info-err{background:#fef2f2;border:1px solid #fecaca}

/* Non-KG qty */
.pm-qty-wrap{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 0}
.pm-qty-btn{width:44px;height:44px;border:1.5px solid #d1d5db;border-radius:50%;background:#fff;font-size:1.3rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;transition:all 0.12s}
.pm-qty-btn:hover{background:#f3f4f6;border-color:#93c5fd}
.pm-qty-btn:active{background:#dbeafe}
.pm-qty-in{width:64px;height:44px;text-align:center;border:1.5px solid #d1d5db;border-radius:10px;font-size:1.1rem;font-weight:700}
.pm-qty-in::-webkit-inner-spin-button,.pm-qty-in::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pm-qty-u{font-size:0.85rem;color:#6b7280}

/* Footer with inline price */
.pm-foot{display:flex;gap:8px;padding:12px 16px;border-top:1px solid #f3f4f6;background:#fafafa}
.pm-rm{width:44px;height:44px;border:1.5px solid #fecaca;border-radius:10px;background:#fff;color:#dc2626;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.12s}
.pm-rm:hover{background:#fef2f2;border-color:#dc2626}
.pm-submit{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;background:var(--sd-add-btn-bg,#1e40af);color:var(--sd-add-btn-text,#fff);border:none;border-radius:10px;font-size:0.875rem;font-weight:600;cursor:pointer;transition:opacity 0.12s}
.pm-submit:hover{opacity:0.9}
.pm-submit:disabled{opacity:0.4;cursor:not-allowed}

/* Cart badge on row */
.os-cart-info-badge{display:inline-flex;align-items:center;gap:3px;background:#1e40af;color:#fff;padding:2px 8px;border-radius:10px;font-size:0.7rem;font-weight:600;white-space:nowrap}
.os-row{cursor:pointer}

/* ===== WHEEL PICKER (v17.5: iOS-like, subtil 3D) ===== */
.whl{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-smoothing:antialiased;
  perspective:800px;
}
.whl-track{transform-style:preserve-3d}
.whl-item{
  transition:color 0.16s, font-size 0.16s, font-weight 0.16s, transform 0.16s, opacity 0.16s;
  will-change:transform,opacity;
  letter-spacing:0.2px;
}
.pm-dual-wheel{display:flex;gap:12px;margin-bottom:12px}
.pm-wheel-col{flex:1;min-width:0}

/* (pm styles moved to PRODUCT MODAL section above) */

/* ===== PRODUCTION SPLIT VIEW ===== */
@media (max-width: 768px) {
    #prod-split { flex-direction: column !important; }
    #prod-split > div:first-child {
        flex: none !important;
        max-width: 100% !important;
        max-height: 40vh;
    }
}

/* ===== ADMIN BOARD 3-COLUMN ===== */
@media (max-width: 768px) {
    #admin-board { flex-direction: column !important; }
}

/* ============================================
   DARK MODE
   ============================================ */
[data-theme="dark"] {
    --bg: #0f1117;
    --bg-card: #1a1c25;
    --bg-sidebar: #12131a;

    --text: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-light: #64748b;
    --text-white: #ffffff;

    --border: #2d3748;
    --border-light: #1e2533;
    --bg-secondary: #141620;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.35);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.4);

    --primary-light: #2a2a44;

    color-scheme: dark;
}

/* Base overrides */
[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] .app-header { background: var(--bg-card); border-bottom-color: var(--border); }
[data-theme="dark"] .card { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .card-header { border-bottom-color: var(--border); }
[data-theme="dark"] .card-footer { background: var(--bg); border-top-color: var(--border); }

/* Inputs */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #141620;
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200,169,81,0.2);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #4a5568; }

/* Modal */
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.7); }
[data-theme="dark"] .modal { background: var(--bg-card); }

/* Toast */
[data-theme="dark"] .toast { background: var(--bg-card); color: var(--text); }

/* Tables */
[data-theme="dark"] table thead tr,
[data-theme="dark"] .excel-table thead th {
    background: #141620 !important;
    color: var(--text-secondary);
}
[data-theme="dark"] table tbody tr { border-bottom-color: var(--border); }
[data-theme="dark"] table tbody tr:hover { background: #1e2030 !important; }
[data-theme="dark"] .excel-table tbody td { border-color: var(--border); }
[data-theme="dark"] .row-inactive { background: #1a1520 !important; }

/* Sidebar */
[data-theme="dark"] .sidebar { background: var(--bg-sidebar); }
[data-theme="dark"] .sidebar-footer { border-top-color: var(--border); }

/* Buttons */
[data-theme="dark"] .btn-outline { border-color: var(--border); color: var(--text); }
[data-theme="dark"] .btn-outline:hover { background: #1e2030; }

/* User dropdown */
[data-theme="dark"] .user-dropdown { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .user-dropdown a:hover { background: #1e2030; }
[data-theme="dark"] .dropdown-divider { border-color: var(--border); }
[data-theme="dark"] .dropdown-header { border-bottom-color: var(--border); }

/* Empty state */
[data-theme="dark"] .empty-state { color: var(--text-secondary); }

/* Bottom nav */
[data-theme="dark"] .bottom-nav { background: var(--bg-card); border-top-color: var(--border); }

/* Form group label */
[data-theme="dark"] .form-group label { color: var(--text-secondary); }

/* Stat cards (Dashboard) — override inline bg */
[data-theme="dark"] .stat-card { background: var(--bg-card) !important; border-color: var(--border) !important; }

/* Stat icons — darker tinted backgrounds */
[data-theme="dark"] .stat-icon.blue { background: #1e3a5f; }
[data-theme="dark"] .stat-icon.green { background: #14332a; }
[data-theme="dark"] .stat-icon.yellow { background: #3d2e0a; }
[data-theme="dark"] .stat-icon.red { background: #3d1515; }
[data-theme="dark"] .stat-icon.gold { background: #3d2e0a; }

/* Stat content */
[data-theme="dark"] .stat-content h4 { color: var(--text-secondary); }
[data-theme="dark"] .stat-value { color: var(--text); }

/* Customer dashboard cards */
[data-theme="dark"] .cdash-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .cdash-card-label { color: var(--text) !important; }
[data-theme="dark"] .cdash-card-action { color: var(--text-secondary) !important; }

/* Page title */
[data-theme="dark"] .page-title { color: var(--text); }

/* Loading spinner */
[data-theme="dark"] .loading-spinner { border-color: var(--border); border-top-color: var(--accent); }

/* Empty state text */
[data-theme="dark"] .empty-state h3 { color: var(--text-secondary); }
[data-theme="dark"] .empty-state p { color: var(--text-light); }

/* Search inputs */
[data-theme="dark"] .search-input,
[data-theme="dark"] input[type="search"] {
    background: #141620;
    border-color: var(--border);
    color: var(--text);
}

/* Excel table */
[data-theme="dark"] .excel-table { border-color: var(--border); }
[data-theme="dark"] .excel-table tbody td {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .excel-table .row-selected td { background: #1e2a3a !important; }
[data-theme="dark"] .excel-table .row-stock-low td { background: #2a1515 !important; }
[data-theme="dark"] .excel-table .row-inactive td { background: #1a1520 !important; opacity: 0.7; }

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2d3748; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a5568; }

/* Checkbox accent */
[data-theme="dark"] input[type="checkbox"] { accent-color: var(--accent); }

/* Links */
[data-theme="dark"] a { color: var(--accent-light); }
[data-theme="dark"] a:hover { color: var(--accent); }

/* Avatar */
[data-theme="dark"] .user-avatar { border-color: var(--border); }
[data-theme="dark"] .avatar-initials { background: var(--primary-light); }

/* ── Orders: Status filter buttons (inactive) ── */
[data-theme="dark"] .cord-badge {
    /* Lighten badge backgrounds for dark mode */
    filter: saturate(1.2);
}

/* ── Orders: Table rows ── */
[data-theme="dark"] .cord-card-nr { color: var(--text); }
[data-theme="dark"] .cord-card-row span { color: var(--text-secondary); }
[data-theme="dark"] .cord-card-footer { border-top-color: var(--border); }

/* ── Invoices: Status summary cards ── */
[data-theme="dark"] .inv-stat-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* ── Production: Order cards ── */
[data-theme="dark"] .prod-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* ── Shop-Design: Accordion items ── */
[data-theme="dark"] .sd-section {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .sd-section-header {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .sd-section-header:hover {
    background: var(--bg) !important;
}
[data-theme="dark"] .sd-section-icon {
    color: var(--text-light) !important;
}
[data-theme="dark"] .sd-section-title {
    color: var(--text) !important;
}
[data-theme="dark"] .sd-section-body {
    border-top-color: var(--border) !important;
}
[data-theme="dark"] .sd-section.active {
    border-color: #3b82f6 !important;
}
[data-theme="dark"] .sd-section.active .sd-section-header {
    background: #1e2a45 !important;
}

/* ── Lieferschein Detail: Document preview stays light (print document) ── */
[data-theme="dark"] #delivery-note-print.card {
    background: #ffffff !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}
[data-theme="dark"] #delivery-note-print .card-body {
    background: #ffffff !important;
}
[data-theme="dark"] #delivery-note-print h2,
[data-theme="dark"] #delivery-note-print strong,
[data-theme="dark"] #delivery-note-print td,
[data-theme="dark"] #delivery-note-print th,
[data-theme="dark"] #delivery-note-print div,
[data-theme="dark"] #delivery-note-print span,
[data-theme="dark"] #delivery-note-print p {
    color: #1f2937 !important;
}
/* Address box - light green */
[data-theme="dark"] #delivery-note-print [style*="background:#f0fdf4"] {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}
[data-theme="dark"] #delivery-note-print [style*="background:#f0fdf4"] div,
[data-theme="dark"] #delivery-note-print [style*="background:#f0fdf4"] span {
    color: #166534 !important;
}
/* Notes bg */
[data-theme="dark"] #delivery-note-print [style*="background:#f8fafc"] {
    background: #f8fafc !important;
}
[data-theme="dark"] #delivery-note-print [style*="background:#f8fafc"] strong,
[data-theme="dark"] #delivery-note-print [style*="background:#f8fafc"] span {
    color: #374151 !important;
}
/* TABLE: Override ALL dark mode table rules */
[data-theme="dark"] #delivery-note-print table thead tr {
    background: #ffffff !important;
    border-bottom: 2px solid #374151 !important;
}
[data-theme="dark"] #delivery-note-print table thead th {
    background: #ffffff !important;
    color: #374151 !important;
    border-color: #d1d5db !important;
}
[data-theme="dark"] #delivery-note-print table tbody tr {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
}
[data-theme="dark"] #delivery-note-print table tbody tr:hover {
    background: #ffffff !important;
}
[data-theme="dark"] #delivery-note-print table tfoot tr {
    background: #ffffff !important;
    border-color: #374151 !important;
}
[data-theme="dark"] #delivery-note-print table td,
[data-theme="dark"] #delivery-note-print table th {
    border-color: #e5e7eb !important;
    color: #1f2937 !important;
    background: transparent !important;
}
/* Secondary text colors in doc */
[data-theme="dark"] #delivery-note-print [style*="color:#6b7280"] { color: #6b7280 !important; }
[data-theme="dark"] #delivery-note-print [style*="color:#9ca3af"] { color: #9ca3af !important; }
[data-theme="dark"] #delivery-note-print [style*="color:#374151"] { color: #374151 !important; }
/* Delivery hint yellow box stays yellow in print */
[data-theme="dark"] #delivery-note-print [style*="background:#fef3c7"] {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fde68a !important;
}
[data-theme="dark"] #delivery-note-print [style*="background:#fef3c7"] span {
    color: #92400e !important;
}
/* Notes in red stay red */
[data-theme="dark"] #delivery-note-print [style*="color:#b91c1c"] {
    color: #b91c1c !important;
}
/* Signature lines */
[data-theme="dark"] #delivery-note-print [style*="border-top:1px solid #d1d5db"] {
    border-top-color: #d1d5db !important;
}

/* ── eRechnung Status-Box (outside print doc, in dark area) ── */
[data-theme="dark"] [style*="background:#dcfce7"] {
    background: #14332a !important;
    border-color: #22c55e !important;
    color: #bbf7d0 !important;
}
[data-theme="dark"] [style*="background:#dcfce7"] div,
[data-theme="dark"] [style*="background:#dcfce7"] span,
[data-theme="dark"] [style*="background:#dcfce7"] strong {
    color: #bbf7d0 !important;
}

/* ── Shop-Design: Preview panel always stays LIGHT mode ── */
/* Container: white bg + dark text via inheritance (NOT !important so inline styles win) */
[data-theme="dark"] .sd-preview-panel {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.06) !important;
    color: #1f2937;
}
/* Header area only */
[data-theme="dark"] .sd-preview-kicker { color: #64748b !important; }
[data-theme="dark"] .sd-preview-title { color: #111827 !important; }
[data-theme="dark"] .sd-preview-hint { color: #64748b !important; }
[data-theme="dark"] .sd-preview-hint * { color: #64748b !important; }
[data-theme="dark"] .sd-preview-note {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}
/* Content area: white bg, inherit dark text, NO color !important on children */
[data-theme="dark"] #sd-preview-content { background: #ffffff !important; color: #1f2937; }
/* Undo global dark-mode background overrides that would darken preview elements */
[data-theme="dark"] .sd-preview-panel [style*="background:#eff6ff"] { background: #eff6ff !important; }
[data-theme="dark"] .sd-preview-panel [style*="background:#f5f3ff"] { background: #f5f3ff !important; }
[data-theme="dark"] .sd-preview-panel [style*="background:#fffbeb"] { background: #fffbeb !important; }
[data-theme="dark"] .sd-preview-panel [style*="background:#ecfdf5"] { background: #ecfdf5 !important; }
[data-theme="dark"] .sd-preview-panel [style*="background:#ecfeff"] { background: #ecfeff !important; }
[data-theme="dark"] .sd-preview-panel [style*="background:#f0fdf4"] { background: #f0fdf4 !important; }
[data-theme="dark"] .sd-preview-panel [style*="background:#f8fafc"] { background: #f8fafc !important; }
[data-theme="dark"] .sd-preview-panel [style*="background:#fef2f2"] { background: #fef2f2 !important; }
[data-theme="dark"] .sd-preview-panel [style*="background:#f3f4f6"] { background: #f3f4f6 !important; }
[data-theme="dark"] .sd-preview-panel [style*="background:#f9fafb"] { background: #f9fafb !important; }
[data-theme="dark"] .sd-preview-panel [style*="background:#fff7ed"] { background: #fff7ed !important; }
[data-theme="dark"] .sd-preview-panel [style*="background:#fff7eb"] { background: #fff7eb !important; }
[data-theme="dark"] .sd-preview-panel [style*="background:#fef9ee"] { background: #fef9ee !important; }
[data-theme="dark"] .sd-preview-panel [style*="background:#fefce8"] { background: #fefce8 !important; }
[data-theme="dark"] .sd-preview-panel [style*="background:#dcfce7"] { background: #dcfce7 !important; }
[data-theme="dark"] .sd-preview-panel [style*="color:#d1d5db"] { color: #d1d5db !important; }
/* Undo global dark table overrides inside preview */
[data-theme="dark"] .sd-preview-panel table thead tr { background: inherit !important; }
[data-theme="dark"] .sd-preview-panel table tbody tr:hover { background: inherit !important; }
/* Preview inputs/selects stay light */
[data-theme="dark"] .sd-preview-panel #sd-preview-content input,
[data-theme="dark"] .sd-preview-panel #sd-preview-content select {
    background: #ffffff !important;
    border-color: #d1d5db !important;
    color: #1f2937 !important;
}

/* ── General: Inline table rows that use hardcoded backgrounds ── */
[data-theme="dark"] table tr[style*="background:#f8f"] { background: var(--bg) !important; }
[data-theme="dark"] table thead tr { background: #141620 !important; }
[data-theme="dark"] table tbody tr:nth-child(even) { background: transparent; }
[data-theme="dark"] table tbody tr:hover { background: #1e2030 !important; }

/* ── Filter pills / status badges in dark mode ── */
[data-theme="dark"] [style*="background:#eff6ff"] { background: #1e2a45 !important; }
[data-theme="dark"] [style*="background:#f5f3ff"] { background: #2a1e45 !important; }
[data-theme="dark"] [style*="background:#fffbeb"] { background: #3d2e0a !important; }
[data-theme="dark"] [style*="background:#ecfdf5"] { background: #0a3d2e !important; }
[data-theme="dark"] [style*="background:#ecfeff"] { background: #0a2e3d !important; }
[data-theme="dark"] [style*="background:#f0fdf4"] { background: #14332a !important; }
[data-theme="dark"] [style*="background:#f8fafc"] { background: var(--bg) !important; }
[data-theme="dark"] [style*="background:#fef2f2"] { background: #3d1515 !important; }
[data-theme="dark"] [style*="background:#f3f4f6"] { background: var(--bg) !important; }
[data-theme="dark"] [style*="background:#f9fafb"] { background: var(--bg) !important; }
[data-theme="dark"] [style*="background:#fff7ed"] { background: #3d2a0a !important; }
[data-theme="dark"] [style*="background:#fff7eb"] { background: #3d2e0a !important; }
[data-theme="dark"] [style*="background:#fffbeb"] { background: #3d2e0a !important; }
[data-theme="dark"] [style*="background:#fef9ee"] { background: #3d2e0a !important; }

/* ── Override chevron colors ── */
[data-theme="dark"] [style*="color:#d1d5db"] { color: var(--text-light) !important; }

/* ── Production: Warning boxes ── */
[data-theme="dark"] [style*="background:#fff7ed"][style*="border:1px solid #fed7aa"] {
    background: #3d2a0a !important;
    border-color: #92400e !important;
}

/* ── Picker-Vorschau (shop-config) yellow box ── */
[data-theme="dark"] [style*="background:#fefce8"] {
    background: #3d360a !important;
    border-color: #854d0e !important;
}

/* Dark mode toggle button */
.dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background var(--transition), color var(--transition);
}
.dark-mode-toggle:hover { background: var(--border-light); color: var(--text); }
[data-theme="dark"] .dark-mode-toggle:hover { background: #2d3748; }

/* ── Production: Return alert animations ── */
@keyframes prod-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}
@keyframes prod-shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}
[data-theme="dark"] #prod-return-banner {
    background: #3d1515 !important;
    border-color: #ef4444 !important;
}
[data-theme="dark"] #prod-return-banner * {
    color: #fca5a5 !important;
}