/* ============================================================
   elexx Cockpit 2026 – Global Stylesheet
   High-Performance CRM Skin
   ============================================================ */

/* Font wird per <link> im HTML geladen – kein @import (blockiert Rendering) */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
    --primary-25: #fffefb;
    --primary-50: #fffbf5;
    --primary-100: #fef3c7;
    --primary-200: #ffd08a;
    --primary-300: #f4c070;
    --primary-500: #E28913;
    --primary-600: #d97706;
    --primary-700: #b45309;
    --primary-800: #92400e;

    --gray-25: #fafafb;
    --gray-50: #f7f8fa;
    --gray-100: #eef0f4;
    --gray-200: #dfe2e8;
    --gray-300: #c4c9d4;
    --gray-400: #8f96a3;
    --gray-500: #5f6775;
    --gray-600: #454d5c;
    --gray-700: #2e3542;
    --gray-800: #1a2030;
    --gray-900: #0d1320;

    --accent: #E28913;
    --accent-light: #f59e0b;
    --success: #22c55e;
    --success-light: #dcfce7;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --error: #ef4444;
    --error-light: #fee2e2;
    --info: #3b82f6;
    --info-light: #dbeafe;
    --special: #8b5cf6;
    --special-light: #ede9fe;

    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.04);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
    --shadow: 0 2px 8px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.04);
    --shadow-md: 0 4px 16px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.04);
    --shadow-lg: 0 8px 30px rgb(0 0 0 / 0.1), 0 4px 12px rgb(0 0 0 / 0.04);
    --shadow-xl: 0 16px 48px rgb(0 0 0 / 0.12), 0 8px 20px rgb(0 0 0 / 0.06);
    --shadow-glow: 0 0 0 4px rgba(226, 137, 19, 0.15), 0 2px 8px rgb(0 0 0 / 0.06);

    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--gray-50);
    color: var(--gray-800);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    font-size: 13.5px;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    flex: 1;
    overflow: visible;
}

::selection {
    background: var(--primary-100);
    color: var(--primary-800);
}

input::placeholder {
    font-size: 0.75rem;
    color: var(--gray-400);
}


/* ── Layout ────────────────────────────────────────────────── */
.container {
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 2.5rem;
    overflow: visible;
}


/* ── Hero / Page Header ────────────────────────────────────── */
.hero {
    text-align: center;
    padding: 1.5rem 0 1.25rem;
}

.hero h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.35rem;
    letter-spacing: -0.03em;
    line-height: 1.3;
}

.hero h1 i {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-right: 0.25rem;
}

.hero p {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-bottom: 1rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}


/* ── Team Info Badge ───────────────────────────────────────── */
.team-info {
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-xl);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.team-info .team-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    color: white;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.78rem;
    box-shadow: 0 2px 8px rgb(217 119 6 / 0.3);
}


/* ── Cards ─────────────────────────────────────────────────── */
.card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    margin-bottom: 1.25rem;
    transition: box-shadow var(--transition);
}

.card:hover {
    box-shadow: var(--shadow);
    border-color: var(--primary-200);
}

.card h3 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: -0.01em;
}

.card h3 i {
    color: var(--primary-600);
    font-size: 0.85rem;
}


/* ── Statistics Grid & Cards ───────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.stat-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem;
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--gray-200);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    transition: all var(--transition);
    position: relative;
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.stat-icon.primary   { color: var(--primary-600); }
.stat-icon.success   { color: var(--success); }
.stat-icon.warning   { color: var(--warning); }
.stat-icon.info      { color: var(--info); }
.stat-icon.special   { color: var(--special); }
.stat-icon.secondary { color: var(--gray-500); }

.stat-content {
    flex: 1;
    min-width: 0;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1.1;
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 0.72rem;
    color: var(--gray-500);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.stat-breakdown {
    margin-top: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.breakdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--gray-600);
}

.breakdown-item i {
    width: 14px;
    font-size: 0.7rem;
    flex-shrink: 0;
    text-align: center;
}

.breakdown-label {
    font-weight: 500;
    color: var(--gray-500);
}

.breakdown-value {
    font-weight: 650;
    color: var(--gray-800);
    margin-left: auto;
}


/* ── Buttons ───────────────────────────────────────────────── */
.btn,
.btn-detail,
.detail-btn,
.toggle-inactive-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: -0.005em;
    line-height: 1.4;
    height: 32px;
    font-family: inherit;
}

.btn:hover, .btn-detail:hover, .detail-btn:hover, .toggle-inactive-btn:hover {
    transform: translateY(-1px);
}

.btn:active, .btn-detail:active, .detail-btn:active, .toggle-inactive-btn:active {
    transform: translateY(0);
}

.btn-primary, .btn-detail {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
    box-shadow: 0 2px 6px rgba(226, 137, 19, 0.2);
}
.btn-primary:hover, .btn-detail:hover {
    background: var(--primary-600);
    border-color: var(--primary-600);
    box-shadow: 0 4px 12px rgba(226, 137, 19, 0.3);
}

.btn-secondary, .toggle-inactive-btn {
    background: white;
    color: var(--gray-700);
    border-color: var(--gray-300);
}
.btn-secondary:hover, .toggle-inactive-btn:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-800);
    box-shadow: var(--shadow-sm);
}

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

.btn-info {
    background: var(--info);
    color: white;
    border-color: var(--info);
}
.btn-info:hover {
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: var(--shadow-md);
}

.detail-btn {
    background: var(--gray-50);
    color: var(--gray-600);
    border-color: var(--gray-200);
}
.detail-btn:hover {
    background: var(--primary-50);
    border-color: var(--primary-300);
    color: var(--primary-700);
    box-shadow: var(--shadow-sm);
}

.btn-ghost {
    background: transparent;
    color: var(--primary-600);
    border-color: var(--primary-200);
}
.btn-ghost:hover {
    background: var(--primary-25);
    border-color: var(--primary-300);
    box-shadow: var(--shadow-sm);
}

.btn-status {
    background: var(--gray-50);
    color: var(--gray-700);
    border-color: var(--gray-300);
}
.btn-status:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.btn-sm {
    height: 28px;
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
}

.btn-group {
    display: flex;
    gap: 0.75rem;
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: 1rem;
}


/* ── View Switch (Tabs) ────────────────────────────────────── */
.view-switch {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
    background: var(--gray-100);
    border-radius: var(--radius);
    padding: 0.25rem;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 550;
    font-size: 0.78rem;
    transition: all var(--transition);
    border: none;
}
.view-btn.active {
    background: white;
    color: var(--gray-900);
    box-shadow: var(--shadow-sm);
}
.view-btn:not(.active) {
    background: transparent;
    color: var(--gray-500);
}
.view-btn:not(.active):hover {
    color: var(--gray-700);
    background: var(--gray-50);
}


/* ── KW Navigation ─────────────────────────────────────────── */
.kw-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.kw-nav a {
    background: white;
    color: var(--gray-700);
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 550;
    font-size: 0.78rem;
    transition: all var(--transition);
    border: 1px solid var(--gray-200);
}
.kw-nav a:hover {
    background: var(--primary-50);
    border-color: var(--primary-300);
    color: var(--primary-700);
    box-shadow: var(--shadow-sm);
}
.kw-nav strong {
    font-size: 0.9rem;
    color: var(--gray-800);
    font-weight: 600;
    letter-spacing: -0.01em;
}


/* ── Forms ──────────────────────────────────────────────────── */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 0.6rem;
}

.form-group label {
    font-weight: 550;
    margin-bottom: 0.3rem;
    color: var(--gray-600);
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-group label i {
    color: var(--gray-400);
    font-size: 0.7rem;
}

.form-group input,
.form-group select {
    padding: 0.5rem 0.7rem;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    background: white;
    transition: all var(--transition);
    font-family: inherit;
    width: 100%;
    color: var(--gray-800);
}

.form-group input:hover,
.form-group select:hover {
    border-color: var(--gray-300);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: var(--shadow-glow);
}

.filter-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    margin-bottom: 1.25rem;
    overflow: visible;
    position: relative;
    z-index: 10;
}

.filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.85rem;
    align-items: end;
    position: relative;
}

.filter-section {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: end;
}

/* Filter Rows (responsive Grid) */
.filter-row {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
    align-items: start;
}
.filter-card .filter-row,
.filter-section .filter-row {
    align-items: end;
}
.filter-row-4 { grid-template-columns: 2fr 1fr 1fr 1fr; }
.filter-row-6 { grid-template-columns: repeat(6, 1fr); }
.filter-row-3 { grid-template-columns: repeat(3, 1fr); }
.filter-row-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1200px) {
    .filter-row-6 { grid-template-columns: repeat(3, 1fr); }
    .filter-row-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .filter-row-4,
    .filter-row-6,
    .filter-row-3 { grid-template-columns: 1fr; }
    .filter-row-2 { grid-template-columns: 1fr; }
}

.date-range-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: inherit;
}
.date-range-inputs span {
    color: var(--gray-400);
    font-weight: 500;
    font-family: inherit;
}
.date-range-inputs input {
    font-family: inherit;
}

.sort-active {
    color: var(--primary-600);
}


/* ── Search ────────────────────────────────────────────────── */
.search-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    margin-bottom: 1.25rem;
}

.search-form {
    display: flex;
    gap: 0.75rem;
    align-items: end;
}

.search-section {
    display: flex;
    gap: 0.75rem;
    align-items: end;
}

.search-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.search-group label {
    font-weight: 550;
    margin-bottom: 0.3rem;
    color: var(--gray-600);
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.search-group input {
    padding: 0.5rem 0.7rem;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    background: white;
    transition: all var(--transition);
    color: var(--gray-800);
}
.search-group input:hover { border-color: var(--gray-300); }
.search-group input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: var(--shadow-glow);
}

.search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid var(--primary-600);
    cursor: pointer;
    background: var(--primary-600);
    color: white;
    transition: all var(--transition);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2);
    font-family: inherit;
    min-height: 34px;
}
.search-btn:hover {
    background: var(--primary-700);
    border-color: var(--primary-700);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}


/* ── Techniker Search Dropdown ─────────────────────────────── */
.techniker-search-wrapper {
    position: relative;
}

.techniker-search-input {
    width: 100%;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 0.5rem 2.5rem 0.5rem 0.7rem;
    font-size: 0.8rem;
    background: white;
    transition: all var(--transition);
    font-family: inherit;
    color: var(--gray-800);
}
.techniker-search-input:hover { border-color: var(--gray-300); }
.techniker-search-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: var(--shadow-glow);
}

.clear-techniker-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0.3rem;
    border-radius: var(--radius-xs);
    transition: all var(--transition);
    display: none;
}
.clear-techniker-btn.visible { display: flex; }
.clear-techniker-btn:hover {
    color: var(--gray-700);
    background: var(--gray-100);
}

.techniker-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    max-height: 280px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
}
.techniker-dropdown.active { display: block; }

.techniker-dropdown-item {
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.8rem;
}
.techniker-dropdown-item:hover {
    background: var(--primary-25);
    color: var(--primary-700);
}
.techniker-dropdown-item.selected {
    background: var(--primary-50);
    color: var(--primary-700);
    font-weight: 600;
}
.techniker-dropdown-item:last-child { border-bottom: none; }

.techniker-dropdown-empty {
    padding: 1rem;
    text-align: center;
    color: var(--gray-400);
    font-style: italic;
    font-size: 0.8rem;
}


/* ── Sort Links / Info ─────────────────────────────────────── */
.sort-links {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}
.sort-link {
    background: white;
    color: var(--gray-600);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all var(--transition);
    border: 1px solid var(--gray-200);
}
.sort-link:hover {
    background: var(--primary-25);
    border-color: var(--primary-200);
    color: var(--primary-700);
}

.sort-info {
    background: linear-gradient(135deg, var(--primary-25), var(--primary-50));
    border: 1px solid var(--primary-200);
    border-radius: var(--radius);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--primary-700);
}
.sort-info-text {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.clear-sort {
    background: white;
    border: 1px solid var(--primary-200);
    color: var(--primary-700);
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 550;
    transition: all var(--transition);
}
.clear-sort:hover {
    background: var(--primary-100);
    border-color: var(--primary-300);
}


/* ── Tables – Shared Base ──────────────────────────────────── */
.table-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.table-header {
    padding: 0.85rem 1rem;
    background: white;
    border-bottom: 1px solid var(--gray-200);
}
.table-header h3 {
    margin: 0;
    font-size: 0.88rem;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* Main Table (Listenansicht) */
.main-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1200px;
    font-size: 0.78rem;
}
.main-table th,
.main-table td {
    padding: 0.7rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}
.main-table th {
    background: var(--gray-100);
    font-weight: 700;
    color: var(--gray-500);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 5;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--gray-200);
    user-select: none;
    -webkit-user-select: none;
}
.main-table th a {
    color: var(--gray-500);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: flex-start;
}
.main-table th a:hover { color: var(--primary-600); }
.main-table tbody tr {
    transition: background var(--transition-fast);
}
.main-table tbody tr:hover {
    background: var(--primary-25);
}

/* Data Table (Standard) */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 0.78rem;
}
.data-table th,
.data-table td {
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    vertical-align: middle;
}
.data-table th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-500);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.data-table th:hover { background: var(--gray-100); color: var(--gray-700); }
.data-table a { color: var(--primary-600); text-decoration: none; font-weight: 550; }
.data-table a:hover { color: var(--primary-700); text-decoration: underline; }
.data-table tbody tr:hover { background: var(--primary-25); }

/* Data Table Sticky (Wochenansicht) */
.data-table-sticky {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    overflow: visible;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}
.data-table-sticky th,
.data-table-sticky td {
    padding: 0.5rem 0.6rem;
    text-align: center;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.78rem;
}
.data-table-sticky th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-500);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: var(--sticky-top, 60px);
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    background-clip: padding-box;
    backdrop-filter: blur(12px);
}
.data-table-sticky tbody tr:hover { background: var(--gray-25); }

/* Positions Table (Auftragsuebersicht) */
.positions-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px;
    background: white;
}
.positions-table th,
.positions-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--gray-100);
}
.positions-table th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--gray-200);
}
.positions-table th:hover {
    background: var(--primary-25);
    color: var(--primary-700);
}
.positions-table th.sortable::after {
    content: '\25B2\00a0\25BC';
    margin-left: 0.35rem;
    color: var(--gray-300);
    font-size: 0.5rem;
    vertical-align: middle;
    letter-spacing: -0.15em;
}
.positions-table th.sort-asc::after {
    content: '\25B2';
    color: var(--primary-600);
    font-size: 0.55rem;
}
.positions-table th.sort-desc::after {
    content: '\25BC';
    color: var(--primary-600);
    font-size: 0.55rem;
}
.positions-table th.sort-active {
    color: var(--primary-700);
}
.positions-table tbody tr {
    transition: background var(--transition-fast);
}
.positions-table tbody tr:hover { background: var(--gray-25); }

/* Inline-Inputs in Positions-Tabelle (Auftragsanlage) */
.positions-table input,
.positions-table select {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-family: inherit;
    background: white;
    transition: all var(--transition-fast);
    color: var(--gray-800);
}
.positions-table input:focus,
.positions-table select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: var(--shadow-glow);
}
.positions-table input[readonly] {
    background: var(--gray-50);
    color: var(--gray-600);
    cursor: default;
}
.positions-table td { vertical-align: top; }

/* Details Table (aufklappbare Zeilen) */
.details-row { display: none; }
.details-row td {
    background: var(--gray-50);
    border: none;
    padding: 0;
}
.details-container {
    padding: 0.6rem 0.75rem;
}
.details-container h4 {
    color: var(--gray-700);
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.details-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    background: white;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--gray-200);
}
.details-table th,
.details-table td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--gray-100);
    text-align: left;
    font-size: 0.76rem;
}
.details-table th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-500);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.details-table tbody tr {
    transition: background var(--transition-fast);
}
.details-table tbody tr:hover { background: var(--gray-25); }
.details-table a {
    color: var(--primary-600);
    text-decoration: none;
    font-weight: 550;
}
.details-table a:hover {
    color: var(--primary-700);
    text-decoration: underline;
}

/* Shared table helpers */
.techname {
    text-align: left;
    font-weight: 600;
    color: var(--gray-900);
    padding-left: 1rem;
    letter-spacing: -0.01em;
}

.col-date       { width: 100px; }
.col-techniker  { width: 150px; }
.col-auftrag    { width: 120px; }
.col-kunde      { width: 180px; }
.col-revenue    { width: 280px; }
.col-details    { width: 100px; }

.nowrap    { white-space: nowrap; }
.text-right { text-align: right; }
.text-end  { text-align: right; }

.current-week {
    color: var(--primary-700);
    font-weight: 600;
}


/* ── Revenue Cells (Wochenansicht) ─────────────────────────── */
.revenue-cell {
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    padding: 0.4rem;
    font-weight: 500;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.15rem;
    transition: all var(--transition);
}
.revenue-cell.has-revenue {
    background: var(--success-light);
    color: #15803d;
    position: relative;
    border: 1px solid #bbf7d0;
}
.revenue-cell.has-revenue:hover {
    box-shadow: 0 2px 8px rgb(34 197 94 / 0.15);
}
.revenue-cell.no-revenue {
    background: var(--gray-50);
    color: var(--gray-300);
    border: 1px solid transparent;
}
.revenue-cell.placeholder {
    background: var(--gray-50);
    color: var(--gray-500);
    font-style: italic;
    border: 1px dashed var(--gray-200);
}
.revenue-main   { font-size: 0.78rem; font-weight: 700; }
.revenue-special { font-size: 0.72rem; color: var(--special); font-weight: 600; }
.revenue-count  { font-size: 0.65rem; opacity: 0.7; }

.revenue-cell.has-revenue .order-links {
    display: none;
    position: absolute;
    bottom: 4px;
    right: 4px;
    left: 4px;
    padding: 0.25rem 0.35rem;
    background: var(--gray-900);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 5;
}
.revenue-cell.has-revenue:hover .order-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    justify-content: center;
}
.revenue-cell.has-revenue .order-links a {
    font-size: 0.65rem;
    color: var(--gray-200);
    text-decoration: none;
    background: var(--gray-700);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition: background var(--transition-fast);
}
.revenue-cell.has-revenue .order-links a:hover {
    background: var(--info);
    color: white;
}

/* Revenue Breakdown (Listenansicht) */
.revenue-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.revenue-main-list {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.revenue-total {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--success);
}
.revenue-special-list {
    color: var(--special);
    font-weight: 600;
    cursor: help;
    position: relative;
    font-size: 0.7rem;
    background: var(--special-light);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-full);
}
.revenue-detail {
    font-size: 0.68rem;
    color: var(--gray-500);
}

.techniker-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.techniker-name {
    font-weight: 600;
    color: var(--gray-800);
    letter-spacing: -0.01em;
}


/* ── Article Highlight ─────────────────────────────────────── */
.article-highlight {
    background: linear-gradient(135deg, var(--special), #7c3aed) !important;
    color: white !important;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}


/* ── Customer Cards (Kunden) ───────────────────────────────── */
.customer-grid {
    display: grid;
    gap: 0.75rem;
}

.customer-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    margin-bottom: 0.65rem;
    transition: all var(--transition);
}
.customer-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--gray-300);
}

.customer-header {
    padding: 0.85rem 1rem;
    background: white;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.customer-info h3 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.15rem;
    letter-spacing: -0.01em;
}
.customer-number {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    color: var(--gray-500);
    background: var(--gray-100);
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-full);
    margin-bottom: 0.3rem;
    font-weight: 500;
}
.customer-address {
    font-size: 0.72rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.customer-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Customer Summary (Akkordeon in Auftragsuebersicht) */
.customer-summary {
    padding: 0.85rem 1rem;
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--gray-800);
    border-bottom: 1px solid var(--gray-100);
    transition: background var(--transition-fast);
}
.customer-summary:hover { background: var(--gray-25); }

.customer-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.customer-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    text-align: right;
}

.customer-content {
    padding: 1rem;
}

.customer-total {
    background: linear-gradient(135deg, var(--primary-25), var(--primary-50));
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.75rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary-500);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.78rem;
}

/* Mini Progress (Customer Accordion) */
.customer-mini-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.15rem;
}
.customer-mini-progress .mini-progress-bar {
    width: 220px !important;
    min-width: 220px;
    height: 5px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.mini-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), var(--primary-500));
    border-radius: var(--radius-full);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.mini-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 2.5s infinite;
}
.mini-progress-text {
    font-size: 0.72rem;
    color: var(--primary-700);
    font-weight: 700;
    min-width: 35px;
}


/* ── Progress Bars ─────────────────────────────────────────── */
.progress-container {
    background: white;
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin: 0.5rem 0;
    border: 1px solid var(--gray-200);
}
.progress-section {
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 0;
    margin: 0.5rem 0;
    border: none;
}
.progress-section:first-child { margin-top: 0; }
.progress-section:last-child  { margin-bottom: 0; }
.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    color: var(--gray-600);
    font-weight: 500;
}
.progress-percentage {
    font-weight: 700;
    color: var(--primary-700);
}
.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), var(--primary-500));
    border-radius: var(--radius-full);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.progress-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2.5s infinite;
}
.progress-details {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    font-size: 0.68rem;
    color: var(--gray-400);
}

@keyframes shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}


/* ── Order Cards (Auftragsuebersicht) ──────────────────────── */
.order-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: white;
    transition: border-color var(--transition);
}
.order-card:hover {
    border-color: var(--gray-300);
}
.order-header { margin-bottom: 0.75rem; }
.order-header a {
    text-decoration: none;
    color: var(--primary-600);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
}
.order-header a:hover {
    color: var(--primary-700);
    text-decoration: underline;
}
.order-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    font-size: 0.78rem;
    color: var(--gray-500);
}
.order-summary {
    background: var(--gray-25);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
    border: 1px solid var(--gray-100);
}
.order-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    font-size: 0.78rem;
    margin-bottom: 0.5rem;
}

.orders-section h4 {
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}
.orders-list { display: grid; gap: 0.5rem; }
.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.7rem;
    background: var(--gray-25);
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-100);
    transition: all var(--transition-fast);
}
.order-item:hover {
    background: var(--primary-25);
    border-color: var(--primary-100);
}
.order-link {
    color: var(--primary-600);
    text-decoration: none;
    font-weight: 550;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.order-link:hover {
    color: var(--primary-700);
    text-decoration: underline;
}


/* ── Status Badges ─────────────────────────────────────────── */
.order-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.status-abgeschlossen {
    background: var(--success-light);
    color: #15803d;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-full);
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.5rem; font-size: 0.7rem; font-weight: 550;
}
.status-abarbeitung {
    background: var(--info-light);
    color: #1e40af;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-full);
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.5rem; font-size: 0.7rem; font-weight: 550;
}
.status-offen {
    background: var(--error-light);
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: var(--radius-full);
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.5rem; font-size: 0.7rem; font-weight: 550;
}


/* ── Chart ─────────────────────────────────────────────────── */
.chart-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
    width: 100%;
}
.chart-card h3 {
    text-align: left;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
    color: var(--gray-700);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.chart-card canvas { cursor: pointer; }
.chart-container {
    position: relative;
    height: 400px;
    width: 100%;
    margin: 0;
    padding: 0;
}


/* ── Negative Values ───────────────────────────────────────── */
.negative-value {
    color: var(--error) !important;
    font-weight: 600;
}
.negative-value-bg {
    background: var(--error-light) !important;
    color: var(--error) !important;
    font-weight: 600;
}
.positions-table td.negative-amount {
    color: var(--error) !important;
    font-weight: 600;
    background-color: rgba(239, 68, 68, 0.04) !important;
}
.stat-value.negative { color: var(--error) !important; }
.position-card-detail .negative-amount,
.order-stats .negative-amount {
    color: var(--error) !important;
    font-weight: 600;
}


/* ── Empty State / No Results ──────────────────────────────── */
.empty-state, .no-results {
    text-align: center;
    padding: 2.5rem 2rem;
}

.empty-state-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.3rem;
    color: var(--gray-400);
}

.empty-state-title, .no-results h3 {
    color: var(--gray-800);
    margin-bottom: 0.35rem;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.empty-state-desc, .no-results p {
    color: var(--gray-500);
    font-size: 0.82rem;
    max-width: 380px;
    margin: 0 auto;
    line-height: 1.5;
}

.empty-state-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.25rem;
}

.no-results i {
    font-size: 2.5rem;
    color: var(--gray-300);
    margin-bottom: 0.75rem;
    display: block;
}
.no-orders {
    text-align: center;
    padding: 1.25rem;
    color: var(--gray-400);
    font-style: italic;
    font-size: 0.8rem;
}


/* ── Mobile Position Cards ─────────────────────────────────── */
.positions-mobile { display: none; }
.position-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    transition: border-color var(--transition);
}
.position-card:hover { border-color: var(--gray-300); }
.position-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.position-card-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    font-size: 0.8rem;
}
.position-card-detail {
    display: flex;
    justify-content: space-between;
}


/* ── Section Headers ────────────────────────────────────────── */
.section {
    margin-bottom: 1.5rem;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.section-subtitle {
    font-size: 0.72rem;
    color: var(--gray-500);
    margin-top: -0.4rem;
    margin-bottom: 0.75rem;
}


/* ── Dashboard Cards Grid ──────────────────────────────────── */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.85rem;
}

.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.65rem;
    font-size: 1.15rem;
    color: var(--primary-600);
}

.card-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: nowrap;
    margin-top: auto;
    align-items: center;
}
.card-actions .btn { white-space: nowrap; font-size: 0.78rem; padding: 0.4rem 0.6rem; }

.card-wide {
    grid-column: span 2;
}

@media (max-width: 1400px) {
    .card-wide { grid-column: span 1; }
}

/* Dashboard Card (modern) */
.dash-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.15rem;
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    transition: all var(--transition);
}
.dash-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.dash-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.dash-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.dash-card-icon.primary { background: var(--primary-50); color: var(--primary-600); }
.dash-card-icon.success { background: var(--success-light); color: var(--success); }
.dash-card-icon.warning { background: var(--warning-light); color: var(--warning); }
.dash-card-icon.info    { background: var(--info-light); color: var(--info); }
.dash-card-icon.special { background: var(--special-light); color: var(--special); }

.dash-card-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-900);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.dash-card-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--gray-500);
    background: var(--gray-100);
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-full);
    margin-top: 0.15rem;
}

.dash-card-desc {
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.5;
    margin-bottom: 0.85rem;
    flex: 1;
}

.dash-card-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: nowrap;
    margin-top: auto;
}
.dash-card-actions .btn { white-space: nowrap; font-size: 0.78rem; padding: 0.4rem 0.6rem; }


/* ── Search Bar ────────────────────────────────────────────── */
.search-container {
    max-width: 450px;
    margin: 0 auto 1.5rem;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 0.6rem 0.85rem 0.6rem 2.4rem;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    background: white;
    box-shadow: var(--shadow-xs);
    transition: all var(--transition);
    font-family: inherit;
    color: var(--gray-800);
}

.search-input:hover {
    border-color: var(--gray-300);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: var(--shadow-glow);
}

.search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
    font-size: 0.85rem;
}

/* Search Results Dropdown */
.search-results {
    max-width: 450px;
    margin: 0 auto 1.5rem;
    position: relative;
    display: none;
}

.search-results.show { display: block; }

.search-results-container {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
    max-height: 380px;
    overflow-y: auto;
    z-index: 10;
}

.search-result-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background var(--transition-fast);
}

.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--gray-25); }

.search-result-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--primary-600);
}

.search-result-content { flex: 1; }

.search-result-title {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 0.82rem;
    margin-bottom: 0.1rem;
}

.search-result-subtitle {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.search-close {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: var(--radius-xs);
    transition: all var(--transition-fast);
}

.search-close:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}


/* ── Flash Messages ────────────────────────────────────────── */
.message {
    max-width: 700px;
    margin: 0.6rem auto;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: var(--shadow-xs);
    border-left: 3px solid var(--success);
    background: white;
    color: var(--gray-800);
}

.message i {
    font-size: 0.95rem;
    flex-shrink: 0;
}

.message i { color: var(--success); }

.message.error {
    border-left-color: var(--error);
}
.message.error i { color: var(--error); }

.message.warning {
    border-left-color: var(--warning);
}
.message.warning i { color: var(--warning); }

.message.info {
    border-left-color: var(--info);
}
.message.info i { color: var(--info); }


/* ── Modal System (einheitlich) ─────────────────────────────── */

/* Overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
    backdrop-filter: blur(4px);
}
.modal-overlay.show,
.modal-overlay.active {
    display: flex;
}

/* Standalone Modal (Bootstrap-Style, z.B. Prüfberichte) */
body > .modal,
main ~ .modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
body > .modal.show,
body > .modal.active,
main ~ .modal.show,
main ~ .modal.active {
    display: flex;
}
.modal-dialog {
    width: 100%;
    max-width: 500px;
    margin: 1rem;
}
.modal-content {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: modalSlideIn 0.25s ease;
}
:root.dark .modal-content {
    background: var(--dark-surface);
    color: var(--dark-text);
}

/* Modal Container (Overlay-Style) */
.modal {
    background: white;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 500px;
    box-shadow: var(--shadow-xl);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.25s ease;
}
.modal-wide  { max-width: 700px; }
.modal-large { max-width: 700px; }
.modal-sm    { max-width: 380px; }

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modal Header (mit Gradient) */
.modal-header {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    color: white;
    padding: 0.85rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.modal-title,
.modal-header h3 {
    font-size: 0.9rem;
    font-weight: 650;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.close-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    font-size: 0.88rem;
    cursor: pointer;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.close-btn:hover { background: rgba(255,255,255,0.25); transform: scale(1.08); }

/* Modal Body */
.modal-body {
    padding: 1.15rem;
    overflow-y: auto;
    flex: 1;
}
.modal-body > .form-group,
.modal-body > .filter-row,
.modal-body > .form-section {
    margin-bottom: 0.65rem;
}
.modal-body > *:last-child {
    margin-bottom: 0;
}
.modal-body .filter-row .form-group {
    margin-bottom: 0;
}
.modal-body .filter-row {
    align-items: start;
}

/* Modal Footer */
.modal-footer {
    background: var(--gray-50);
    padding: 0.75rem 1.15rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* Einfaches Modal (ohne Header/Footer, z.B. schnelle Formulare) */
.modal h4 {
    margin-bottom: 0.85rem;
    color: var(--gray-900);
    font-size: 0.9rem;
    font-weight: 650;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* Modal Formulare */
.modal form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.modal label,
.modal .form-label {
    font-size: 0.72rem;
    font-weight: 550;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.15rem;
}
#iframeModalBody label {
    font-size: inherit;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    color: inherit;
    margin-bottom: 0;
}
.modal input,
.modal textarea,
.modal select {
    padding: 0.5rem 0.7rem;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    background: white;
    width: 100%;
    font-family: inherit;
    color: var(--gray-800);
    transition: all var(--transition);
}
.modal input[type="checkbox"] {
    width: auto;
    padding: 0;
}
.modal input:focus,
.modal textarea:focus,
.modal select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: var(--shadow-glow);
}
.modal textarea { resize: vertical; min-height: 80px; max-height: 250px; }

/* Modal Button-Leiste (einfach) */
.modal .buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.65rem;
}
.modal .buttons button,
.modal .buttons a {
    flex: 1;
    height: 32px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 550;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: all var(--transition);
    border: 1px solid transparent;
    font-family: inherit;
}
.modal .cancel {
    background: white;
    color: var(--gray-700);
    border-color: var(--gray-300);
}
.modal .cancel:hover { background: var(--gray-50); border-color: var(--gray-400); }
.modal .submit {
    background: var(--primary-600);
    color: white;
    border-color: var(--primary-600);
    box-shadow: 0 1px 3px rgba(217, 119, 6, 0.2);
}
.modal .submit:hover:not(:disabled) { background: var(--primary-700); }

/* Bestätigungsdialog */
.modal-confirm .modal-body { text-align: center; padding: 1.5rem 1.15rem; }
.modal-confirm .modal-body i { font-size: 2.5rem; color: var(--warning); margin-bottom: 0.75rem; display: block; }
.modal-confirm .modal-body h4 { margin-bottom: 0.5rem; }
.modal-confirm .modal-body p { color: var(--gray-500); font-size: 0.82rem; }
.modal-confirm .modal-footer { justify-content: center; }

/* Modal Dark Mode */
:root.dark .modal { background: var(--dark-surface); color: var(--dark-text); }
:root.dark .modal-header { background: linear-gradient(135deg, var(--primary-700), var(--primary-600)); }
:root.dark .modal-body { background: var(--dark-surface); color: var(--dark-text); }
:root.dark .modal-footer { background: var(--dark-surface-2); border-color: var(--dark-border); }
:root.dark .modal h4 { color: var(--dark-text); }
:root.dark .modal label, :root.dark .modal .form-label { color: var(--dark-text-muted); }
:root.dark .modal input, :root.dark .modal textarea, :root.dark .modal select {
    background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text);
}
:root.dark .modal input:focus, :root.dark .modal textarea:focus, :root.dark .modal select:focus {
    border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(226, 137, 19, 0.15);
}
:root.dark .modal .cancel { background: var(--dark-surface-2); color: var(--dark-text-muted); border-color: var(--dark-border); }
:root.dark .modal .cancel:hover { background: var(--dark-surface-3); }
:root.dark .close-btn { background: rgba(255,255,255,0.1); }
:root.dark .close-btn:hover { background: rgba(255,255,255,0.2); }
:root.dark .modal-confirm .modal-body i { color: var(--warning); }
:root.dark .modal-confirm .modal-body p { color: var(--dark-text-dim); }

/* Responsive */
@media (max-width: 768px) {
    .modal { max-width: none; width: calc(100% - 2rem); margin: 0; }
    .modal-footer { flex-direction: column-reverse; }
    .modal-footer .btn { width: 100%; justify-content: center; }
}


/* ── Spinner ───────────────────────────────────────────────── */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-lg {
    width: 24px;
    height: 24px;
    border-width: 3px;
}

/* Branded Spinner (Favicon) */
.spinner-brand {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url('favicon.ico') center / contain no-repeat;
    animation: spin 1.2s linear infinite;
    border: none;
    border-radius: 0;
}

.spinner-brand-lg {
    width: 40px;
    height: 40px;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ── Side Panels (generic) ─────────────────────────────────── */
.side-panel {
    position: fixed;
    top: 0;
    right: -340px;
    width: 340px;
    height: 100vh;
    background: white;
    border-left: 1px solid var(--gray-200);
    box-shadow: var(--shadow-xl);
    z-index: 50;
    transition: right var(--transition-slow);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.side-panel.open { right: 0; }
.side-panel.left {
    right: auto;
    left: -340px;
    border-left: none;
    border-right: 1px solid var(--gray-200);
    transition: left var(--transition-slow);
}
.side-panel.left.open { left: 0; }

.side-panel-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.side-panel-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.side-panel-close {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: var(--radius-xs);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
}
.side-panel-close:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

.side-panel-content {
    flex: 1;
    padding: 1.25rem;
    overflow-y: auto;
}

.side-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 45;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-slow);
    backdrop-filter: blur(2px);
}
.side-panel-overlay.show {
    opacity: 1;
    visibility: visible;
}


/* ── Toggle Buttons (fixed side) ───────────────────────────── */
.side-toggle {
    position: fixed;
    right: 1rem;
    z-index: 40;
    background: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    color: var(--gray-500);
    font-size: 1rem;
}
.side-toggle:hover {
    box-shadow: var(--shadow-lg);
    color: var(--gray-700);
    transform: scale(1.05);
}
.side-toggle.active {
    background: var(--primary-600);
    color: white;
    border-color: var(--primary-600);
    animation: pulse-toggle 2s infinite;
}
.side-toggle.active:hover {
    background: var(--primary-700);
}

@keyframes pulse-toggle {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

.side-toggle .badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--error);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ── File Upload ───────────────────────────────────────────── */
.file-upload-wrapper {
    margin-bottom: 0.75rem;
}

.file-select-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: var(--primary-600);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 550;
    cursor: pointer;
    transition: all var(--transition);
    height: 32px;
    font-family: inherit;
}
.file-select-btn:hover {
    background: var(--primary-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.file-list {
    margin-top: 0.5rem;
    padding: 0.6rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    display: none;
}
.file-list.has-files { display: block; }

.file-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.35rem;
    background: white;
    border-radius: var(--radius-xs);
    border: 1px solid var(--gray-100);
    font-size: 0.78rem;
    color: var(--gray-700);
}
.file-list-item:last-child { margin-bottom: 0; }

.file-list-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.file-list-item-name i { color: var(--primary-600); font-size: 0.78rem; }

.file-list-item-size {
    color: var(--gray-500);
    font-size: 0.72rem;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.file-list-item-remove {
    margin-left: 0.35rem;
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    border-radius: var(--radius-xs);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.file-list-item-remove:hover {
    background: var(--error-light);
    color: var(--error);
}


/* ── Tooltips ──────────────────────────────────────────────── */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip-text {
    visibility: hidden;
    width: auto;
    min-width: 160px;
    max-width: 320px;
    background: var(--gray-900);
    color: white;
    text-align: left;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.65rem;
    position: absolute;
    z-index: 1001;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity var(--transition-fast);
    font-size: 0.72rem;
    line-height: 1.4;
    word-wrap: break-word;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}

.tooltip .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    border-width: 4px;
    border-style: solid;
    border-color: var(--gray-900) transparent transparent transparent;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}


/* ── Pagination ─────────────────────────────────────────────── */
.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pagination-info {
    color: var(--gray-500);
    font-size: 0.75rem;
}

.pagination-controls {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.pagination-pages {
    display: flex;
    gap: 0.2rem;
}

.pagination-btn {
    padding: 0.35rem 0.6rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xs);
    color: var(--gray-600);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.4;
}

.pagination-btn:hover:not(.disabled):not(.active) {
    background: var(--gray-50);
    border-color: var(--gray-300);
    color: var(--primary-600);
}

.pagination-btn.active {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: white;
    font-weight: 600;
}

.pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}


/* ── Sort Buttons (Table Header) ───────────────────────────── */
.sort-btn {
    background: none;
    border: none;
    padding: 0.3rem 0.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--gray-500);
    transition: all var(--transition-fast);
    width: 100%;
    text-align: left;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: inherit;
}

.sort-btn:hover {
    color: var(--primary-600);
}

.sort-btn i.fas.fa-sort {
    opacity: 0.4;
    font-size: 0.7rem;
}

.sort-btn i.fas.fa-sort-up,
.sort-btn i.fas.fa-sort-down {
    color: var(--primary-600);
    font-size: 0.7rem;
}


/* ── Action Buttons (Table Row) ────────────────────────────── */
.action-buttons {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.action-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--radius-xs);
}

.action-buttons .btn i {
    margin: 0;
    font-size: 0.7rem;
}

.btn-delete {
    background: var(--error);
    color: white;
    border-color: var(--error);
}
.btn-delete:hover {
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: var(--shadow-md);
}


/* ── Clickable Table Links ─────────────────────────────────── */
.auftragsnr-link,
.kunde-link {
    color: var(--primary-600);
    text-decoration: none;
    transition: all var(--transition-fast);
    display: inline-block;
    font-weight: 550;
}

.auftragsnr-link:hover,
.kunde-link:hover {
    color: var(--primary-700);
    text-decoration: underline;
}


/* ── Checkbox (Table) ──────────────────────────────────────── */
.table-checkbox {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-600);
}


/* ── Status Icons (Check / Cross) ──────────────────────────── */
.status-icon-ok {
    color: var(--success);
    font-size: 1.1rem;
}
.status-icon-none {
    color: var(--gray-400);
    font-size: 1.1rem;
}


/* ── E-Mail Modal ──────────────────────────────────────────── */
.email-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-slow);
    backdrop-filter: blur(4px);
}
.email-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.email-modal-dialog {
    background: white;
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    transform: scale(0.9) translateY(-10px);
    transition: transform var(--transition-slow);
}
.email-modal-overlay.show .email-modal-dialog {
    transform: scale(1) translateY(0);
}

.email-modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--gray-50);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.email-modal-header-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.email-modal-icon {
    width: 32px;
    height: 32px;
    background: var(--success);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.85rem;
}

.email-modal-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-800);
}

.email-modal-subtitle {
    margin: 0;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.email-modal-close {
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: var(--radius-xs);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}
.email-modal-close:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

.email-modal-content {
    padding: 1.25rem;
}

.email-pdf-info-section {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 0.85rem;
    margin-bottom: 1.25rem;
}

.email-pdf-info-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
}

.email-pdf-filename {
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
    font-size: 0.78rem;
    color: var(--gray-500);
    word-break: break-all;
}

.email-form-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

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

.email-form-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 550;
    color: var(--gray-600);
    font-size: 0.78rem;
}
.email-form-label i {
    color: var(--gray-400);
    width: 14px;
    font-size: 0.75rem;
}

.email-form-input,
.email-form-textarea {
    padding: 0.55rem 0.7rem;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    transition: all var(--transition);
    background: white;
    font-family: inherit;
    width: 100%;
    color: var(--gray-800);
}
.email-form-input:focus,
.email-form-textarea:focus {
    outline: none;
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}
.email-form-textarea {
    resize: vertical;
    min-height: 80px;
}

.email-help-text {
    font-size: 0.72rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.15rem;
}

.email-info-box {
    background: var(--info-light);
    border: 1px solid #93c5fd;
    border-radius: var(--radius-sm);
    padding: 0.85rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.email-info-icon {
    color: var(--info);
    font-size: 0.8rem;
    margin-top: 0.1rem;
}
.email-info-text {
    color: #1e40af;
    font-size: 0.78rem;
    line-height: 1.4;
}

.email-loading-state {
    display: none;
    text-align: center;
    padding: 1.5rem;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
}
.email-loading-spinner {
    font-size: 1.5rem;
    color: var(--success);
    margin-bottom: 0.5rem;
}
.email-loading-text {
    margin: 0;
    color: var(--gray-500);
    font-weight: 500;
    font-size: 0.8rem;
}

.email-message-display {
    display: none;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
}
.email-message-success {
    background: var(--success-light);
    border: 1px solid #bbf7d0;
    color: #065f46;
}
.email-message-error {
    background: var(--error-light);
    border: 1px solid #fecaca;
    color: #991b1b;
}

.email-action-buttons {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.email-btn {
    padding: 0.5rem 1.1rem;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 550;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-family: inherit;
}
.email-btn-send {
    background: var(--success);
    color: white;
}
.email-btn-send:hover:not(:disabled) {
    background: #16a34a;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.email-btn-cancel {
    background: var(--gray-500);
    color: white;
}
.email-btn-cancel:hover {
    background: var(--gray-600);
}
.email-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ── Header ─────────────────────────────────────────────────── */
.elexx-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gray-200);
    padding: 0.85rem 0;
    position: sticky;
    top: 0;
    z-index: 50;
}

.elexx-header-content {
    max-width: none;
    margin: 0;
    padding: 0 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.elexx-header .logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.elexx-header .logo img { height: 65px; width: auto; }
.elexx-header .logo-dark { display: none; }
:root.dark .elexx-header .logo-light { display: none; }
:root.dark .elexx-header .logo-dark { display: block; }

.elexx-header .header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.elexx-header .user-menu { position: relative; }

.elexx-header .user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-600);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius);
    transition: all var(--transition);
}
.elexx-header .user-info:hover { background: var(--gray-50); }

.elexx-header .user-greeting {
    color: var(--gray-400);
    font-size: 0.68rem;
    font-weight: 400;
    line-height: 1;
}

.elexx-header .user-name-text {
    color: var(--gray-800);
    font-weight: 600;
    font-size: 0.78rem;
    line-height: 1.2;
}

.elexx-header .user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-500);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.72rem;
}

.elexx-header .user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition);
    z-index: 1000;
}
.elexx-header .user-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
}

.elexx-header .dropdown-header {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--gray-100);
}

.elexx-header .dropdown-name {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--gray-900);
}

.elexx-header .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    color: var(--gray-700);
    text-decoration: none;
    transition: all var(--transition-fast);
    font-size: 0.78rem;
}
.elexx-header .dropdown-item:hover {
    background: var(--gray-50);
    color: var(--gray-900);
}
.elexx-header .dropdown-item.logout {
    border-top: 1px solid var(--gray-100);
    color: var(--error);
}
.elexx-header .dropdown-item.logout:hover { background: var(--error-light); }

.elexx-header .dropdown-icon {
    width: 14px;
    height: 14px;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark Mode Toggle */
.darkmode-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    color: var(--gray-700);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    background: none;
    width: 100%;
}
.darkmode-toggle:hover { background: var(--gray-50); }

.darkmode-switch {
    width: 30px;
    height: 16px;
    background: var(--gray-300);
    border-radius: 10px;
    position: relative;
    transition: background var(--transition);
    flex-shrink: 0;
}
.darkmode-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 12px; height: 12px;
    background: white;
    border-radius: 50%;
    transition: transform var(--transition);
}
:root.dark .darkmode-switch { background: #4a9ede; }
:root.dark .darkmode-switch::after { transform: translateX(14px); }


/* ── Breadcrumb Bar ────────────────────────────────────────── */
.elexx-breadcrumb-bar {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
    padding: 0.3rem 0;
    margin: 0;
}

.elexx-breadcrumb-content {
    max-width: none;
    margin: 0;
    padding: 0 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
}

.elexx-breadcrumb-content a {
    color: var(--primary-600);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.elexx-breadcrumb-content a:hover {
    color: var(--primary-700);
    text-decoration: underline;
}

.elexx-breadcrumb-content .bc-current {
    color: var(--gray-800);
    font-weight: 600;
}

.elexx-breadcrumb-content .bc-sep {
    color: var(--gray-300);
    font-size: 0.6rem;
}


/* ── News Ticker ───────────────────────────────────────────── */
.elexx-ticker-bar {
    background: var(--gray-50);
    color: var(--gray-600);
    border-bottom: 1px solid var(--gray-200);
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
    margin: 0;
    z-index: 49;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.elexx-ticker-bar .ticker-scroll {
    display: inline-block;
    animation: tickerScroll 35s linear infinite;
    padding-left: 100%;
}

@keyframes tickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.elexx-ticker-bar .ticker-scroll:hover {
    animation-play-state: paused;
}


/* ── Footer ────────────────────────────────────────────────── */
.elexx-footer {
    margin-top: auto;
    background: white;
    border-top: 1px solid var(--gray-200);
    padding: 1.25rem 0;
    text-align: center;
    color: var(--gray-400);
    font-size: 0.72rem;
}

.elexx-footer a {
    color: var(--primary-600);
    text-decoration: none;
}
.elexx-footer a:hover { text-decoration: underline; }

.elexx-footer p { margin: 0 0 0.25rem 0; }

.elexx-footer .footer-logo {
    height: 22px;
    width: auto;
    vertical-align: middle;
}

.elexx-footer .footer-logo-dark { display: none; }
:root.dark .elexx-footer .footer-logo-light { display: none; }
:root.dark .elexx-footer .footer-logo-dark { display: inline; }


/* ── Tab System ────────────────────────────────────────────── */
.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0.1rem 0.35rem;
    margin-left: 0.4rem;
    background: var(--error);
    color: white;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    line-height: 1;
}
.nav-tab.active .tab-badge { background: #b91c1c; }
.nav-tab:hover .tab-badge { background: #b91c1c; transform: scale(1.05); transition: all var(--transition); }

/* Colored tab icons */
.nav-tab .fa-file-invoice { color: var(--info); }
.nav-tab .fa-building { color: var(--special); }
.nav-tab .fa-address-book { color: #06b6d4; }
.nav-tab .fa-shopping-cart { color: var(--warning); }
.nav-tab .fa-sticky-note { color: var(--success); }
.nav-tab .fa-exclamation-triangle { color: var(--error); }
.nav-tab .fa-history { color: #6366f1; }
.nav-tab .fa-file-pdf { color: #dc2626; }
.nav-tab .fa-calendar-check { color: #0891b2; }
.nav-tab .fa-tools { color: var(--primary-600); }
.nav-tab .fa-receipt { color: #059669; }
.nav-tab .fa-key { color: var(--primary-600); }
.nav-tab.active i { color: white !important; }


/* ── Compact Table ─────────────────────────────────────────── */
.compact-table {
    font-size: 0.72rem;
    width: 100%;
    table-layout: fixed;
}
.compact-table td,
.compact-table th {
    padding: 0.4rem 0.5rem !important;
    vertical-align: middle;
    font-size: 0.72rem;
}
.compact-table tbody tr { height: auto; min-height: 2.5rem; }

.btn-xs {
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    line-height: 1.2;
    border-radius: var(--radius-xs);
    min-width: auto;
    height: auto;
}


/* ── Collapsible Sections ──────────────────────────────────── */
.collapsible-section {
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-lg);
    background: var(--primary-25);
    margin-bottom: 1.25rem;
    overflow: hidden;
    transition: all var(--transition-slow);
}
.collapsible-section.collapsed {
    background: var(--gray-50);
    border-color: var(--gray-200);
}

.collapsible-header {
    padding: 0.85rem 1rem;
    background: var(--primary-50);
    border-bottom: 1px solid var(--primary-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.collapsible-header:hover { background: var(--primary-100); }
.collapsible-section.collapsed .collapsible-header {
    background: var(--gray-100);
    border-bottom: none;
}

.collapse-indicator {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    font-size: 0.65rem;
    color: var(--primary-700);
}
.collapsible-section.collapsed .collapse-indicator { background: var(--gray-200); }
.collapsible-section.collapsed .collapse-indicator i { transform: rotate(-90deg); }

.collapsible-content {
    padding: 1rem;
    transition: all 0.4s ease;
    opacity: 1;
}
.collapsible-section.collapsed .collapsible-content {
    opacity: 0;
    max-height: 0;
    padding: 0 1rem;
    overflow: hidden;
    pointer-events: none;
}


/* ── PDF Modal (fullscreen viewer) ─────────────────────────── */
.pdf-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.pdf-modal.show { display: flex; }

.pdf-modal-dialog {
    width: 90%;
    max-width: 1200px;
    height: 90%;
    max-height: 900px;
    background: white;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
}

.pdf-modal-header {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.pdf-modal-header .modal-title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-800);
}
.pdf-modal-header .modal-close {
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-xs);
    transition: all var(--transition-fast);
}
.pdf-modal-header .modal-close:hover { color: var(--gray-700); background: var(--gray-100); }

.pdf-modal-body { flex: 1; position: relative; overflow: hidden; }
.pdf-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    z-index: 1;
}
.pdf-viewer { width: 100%; height: 100%; border: none; display: block; }


/* ── Email Suggestion Chips ────────────────────────────────── */
.email-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.email-suggestion {
    padding: 0.3rem 0.65rem;
    cursor: pointer;
    font-size: 0.75rem;
    border-radius: var(--radius-xs);
    border: 1px solid var(--gray-200);
    background: white;
    display: inline-flex;
    flex-direction: column;
    transition: all var(--transition-fast);
    text-transform: none;
}
.email-suggestion strong { color: var(--gray-800); font-weight: 600; font-size: 0.72rem; text-transform: none; }
.email-suggestion span { color: var(--primary-600); font-size: 0.68rem; text-transform: none; }
.email-suggestion:hover {
    background: var(--primary-25);
    border-color: var(--primary-300);
}


/* ── Notiz Items ───────────────────────────────────────────── */
.notiz-item {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--gray-100);
}
.notiz-item:last-child { border-bottom: none; }

.notiz-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.notiz-content { flex: 1; min-width: 0; }

.notiz-text {
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--gray-800);
    margin-bottom: 0.15rem;
}

.notiz-meta {
    font-size: 0.68rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.notiz-meta i { font-size: 0.6rem; }

.notiz-item-erledigt {
    opacity: 0.7;
}
.notiz-item-erledigt .notiz-text {
    text-decoration: line-through;
    color: var(--gray-500);
}

.notiz-erledigt-info {
    margin-top: 0.25rem;
    font-size: 0.65rem;
    color: var(--success);
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.notiz-erledigt-info i { font-size: 0.58rem; }
.btn-za-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
    border-radius: var(--radius-xs);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}
.btn-za-erledigen { background: var(--success-light); color: #059669; }
.btn-za-erledigen:hover { background: var(--success); color: white; }
.btn-za-oeffnen { background: var(--error-light); color: var(--error); }
.btn-za-oeffnen:hover { background: var(--error); color: white; }


/* ── Kunden-Detail / Detail-Seiten ─────────────────────────── */

/* Hero Header (Detail-Seiten) */
.hero:has(.hero-header) { text-align: left; }
.hero-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.25rem; }
.hero-title h1 { font-size: 1.6rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.35rem; letter-spacing: -0.03em; }
.hero-subtitle { font-size: 0.85rem; color: var(--gray-500); display: flex; align-items: center; gap: 1rem; }
.anruf-btn { background: var(--primary-600); color: white; border: none; padding: 0.45rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 550; cursor: pointer; transition: all var(--transition); display: flex; align-items: center; gap: 0.5rem; text-decoration: none; height: 32px; }
.anruf-btn:hover { background: var(--primary-700); box-shadow: var(--shadow-md); color: white; }

/* Nav Tabs */
.nav-tabs { display: flex; gap: 0.35rem; margin-bottom: 1.25rem; background: white; border-radius: var(--radius-lg); padding: 0.4rem; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); overflow-x: auto; }
.nav-tab { background: none; border: none; padding: 0.35rem 0.6rem; border-radius: var(--radius-sm); font-size: 0.68rem; font-weight: 550; color: var(--gray-500); cursor: pointer; transition: all var(--transition-fast); text-decoration: none; text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.4rem; white-space: nowrap; min-width: 100px; }
.nav-tab:hover { background: var(--gray-50); color: var(--gray-800); }
.nav-tab.active { background: var(--primary-600); color: white; }

/* Tab Content */
.tab-content { margin-top: 1.25rem; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.iframe-loading { font-size: 0.72rem; color: var(--gray-500); text-align: center; padding: 1rem; }
.iframe-loading i { margin-right: 0.5rem; }
.embedded-tab-frame { width: 100% !important; min-height: 600px; border: 0 !important; outline: none; background: transparent; display: block; overflow: hidden; }

/* Card Header/Body (Detail-Seiten) */
.card-header { background: transparent; padding: 0.85rem 1rem; border-bottom: 1px solid var(--gray-200); display: flex; justify-content: space-between; align-items: center; }
.card-header h4 { font-size: 0.88rem; font-weight: 600; color: var(--gray-900); margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.card-header h4 i { color: var(--primary-600); }
.card-body { padding: 1rem; }

/* Button Outline Variants */
.btn-outline-primary { background: transparent; color: var(--primary-600); border-color: var(--primary-600); }
.btn-outline-primary:hover { background: var(--primary-600); color: white; }
.btn-outline-secondary { background: transparent; color: var(--gray-600); border-color: var(--gray-300); }
.btn-outline-secondary:hover { background: var(--gray-100); color: var(--gray-800); }
.btn-outline-danger { background: transparent; color: var(--error); border-color: var(--error); }
.btn-outline-danger:hover { background: var(--error); color: white; }
.btn-outline-success { background: transparent; color: var(--success); border-color: var(--success); }
.btn-outline-success:hover { background: var(--success); color: white; }

/* Rechnungsblock */
.rechnungsblock-header, .data-table thead th.rechnungsblock-header, .data-table tbody td.rechnungsblock-cell { background: var(--primary-25); border-right: 1px solid var(--primary-200); }
.data-table thead th.rechnungsblock-header:last-of-type, .data-table tbody td.rechnungsblock-cell:last-of-type { border-right: 2px solid var(--primary-500); padding-right: 1rem; }

/* Standorte */
.standorte-section { background: var(--primary-25); border: 2px solid var(--primary-200); border-radius: var(--radius-lg); padding: 1.25rem; margin: 1.25rem 0; }
.standorte-section.collapsible { margin-bottom: 1.25rem; overflow: hidden; transition: all var(--transition-slow); }
.standorte-section.collapsible.collapsed { background: var(--gray-50); border-color: var(--gray-200); }
.standorte-header { padding: 0.85rem 1rem; background: var(--primary-50); border-bottom: 1px solid var(--primary-200); display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background var(--transition-fast); }
.standorte-header:hover { background: var(--primary-100); }
.standorte-section.collapsible.collapsed .standorte-header { background: var(--gray-100); border-bottom: none; }
.standorte-content { padding: 1rem; }
.standorte-section.collapsible.collapsed .standorte-content { opacity: 0; max-height: 0; padding: 0 1rem; overflow: hidden; pointer-events: none; }
.standorte-section.collapsible.collapsed .collapse-indicator i { transform: rotate(-90deg); }
.standorte-section.collapsible.collapsed .standorte-counter { opacity: 0.6; font-style: italic; }
.standorte-info { background: var(--primary-600); color: white; padding: 0.85rem; border-radius: var(--radius); margin-bottom: 0.75rem; }
.standorte-controls { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; align-items: center; }
.standorte-counter { background: var(--gray-100); padding: 0.4rem 0.75rem; border-radius: var(--radius-sm); font-weight: 550; color: var(--gray-700); font-size: 0.78rem; }
.standorte-table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.78rem; background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.standorte-table th, .standorte-table td { padding: 0.5rem 0.6rem; text-align: left; border-bottom: 1px solid var(--gray-200); vertical-align: top; }
.standorte-table th { background: var(--gray-50); font-weight: 600; color: var(--gray-500); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }
.standorte-table tbody tr:hover { background: var(--primary-25); }
.standorte-table tbody tr.selected { background: var(--primary-100); border-left: 4px solid var(--primary-500); }
.standorte-table tbody tr.transferred { opacity: 0.7; }
.standorte-row.search-match { background: var(--primary-25) !important; border-left: 3px solid var(--primary-500); }
.standorte-row.search-hidden { display: none !important; }

/* Status Badges (Detail) */
.status-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.55rem; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: 550; }
.status-badge.compact { padding: 0.15rem 0.45rem; font-size: 0.65rem; }
.status-badge.available { background: var(--success-light); color: #065f46; }
.status-badge.transferred { background: var(--info-light); color: #0277bd; }
.status-badge.unassigned { background: var(--gray-100); color: var(--gray-600); }
.status-badge.assigned { background: var(--success-light); color: #065f46; }
.status-abgeschlossen.compact, .status-abarbeitung.compact { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.45rem; border-radius: var(--radius-full); font-size: 0.65rem; font-weight: 550; }

/* Form Controls */
.full-width-table { width: 100% !important; }
.fw-600 { font-weight: 600; }
.form-control { padding: 0.5rem 0.7rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 0.8rem; background: white; transition: all var(--transition); font-family: inherit; color: var(--gray-800); width: 100%; }
.form-control:focus { outline: none; border-color: var(--primary-500); box-shadow: var(--shadow-glow); }
.form-control::placeholder { font-size: 0.72rem; }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-label { display: block; font-weight: 600; font-size: 0.72rem; color: var(--gray-600); margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.03em; }
.form-hint { font-size: 0.68rem; color: var(--gray-400); margin-top: 0.2rem; }
.search-controls { background: var(--gray-50); padding: 0.85rem; border-radius: var(--radius); border: 1px solid var(--gray-200); margin-bottom: 0.75rem; }
.status-filter-bar { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.status-filter-bar .btn.active-filter { background-color: var(--primary-500) !important; color: white !important; border-color: var(--primary-500) !important; }
.filiale-actions-compact { display: flex; gap: 0.25rem; align-items: center; }
.filiale-status-details { margin-top: 0.3rem; display: flex; flex-direction: column; gap: 0.15rem; }
.filiale-status-details .sub-text { display: flex; align-items: center; gap: 0.3rem; }
.filiale-row.search-match { background-color: var(--success-light); border-left: 3px solid var(--success); }
.filiale-row.search-hidden { display: none !important; }
.filiale-row.unassigned { }
.filiale-actions { display: flex; gap: 0.5rem; align-items: center; }
.filiale-assign-form { display: inline-flex; gap: 0.5rem; align-items: center; background: var(--gray-50); padding: 0.5rem; border-radius: var(--radius-sm); margin-top: 0.5rem; }
.assign-select { min-width: 150px; font-size: 0.78rem; padding: 0.5rem; }
.section-divider { border-top: 1px solid var(--gray-200); margin: 1.25rem 0; padding-top: 1.25rem; }

/* Modals für Detail-Seiten → nutzt jetzt das globale Modal-System oben */
.no-data { text-align: center; padding: 2rem 1rem; color: var(--gray-500); font-size: 0.8rem; line-height: 1.5; }
.no-data i { font-size: 1.8rem; color: var(--gray-300); margin-bottom: 0.6rem; display: block; }
.no-data strong { display: block; font-size: 0.88rem; color: var(--gray-700); margin-bottom: 0.3rem; font-weight: 600; }

/* Notiz Items (Detail) */
.notiz-item { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1rem; margin-bottom: 0.75rem; }
.notiz-content { margin-bottom: 0.75rem; }
.notiz-meta { font-size: 0.68rem; color: var(--gray-500); display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.5rem; }
.notiz-meta i { font-size: 0.6rem; }
.notiz-actions { display: flex; gap: 0.35rem; }
.edit-form { display: none; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--gray-200); }
.edit-form.active { display: block; }

/* Kunden-Zugang User Cards */
.kd-user-card { background: white; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1rem; margin-bottom: 0.75rem; box-shadow: var(--shadow-xs); }
.user-card.expired { border-color: var(--error); background: var(--error-light); }
.user-card.deactivated { border-color: var(--warning); background: var(--warning-light); opacity: 0.8; }
.kd-user-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--gray-200); }
.kd-user-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.35rem; margin-bottom: 0.5rem; font-size: 0.78rem; }
.permissions-section { background: var(--gray-50); border-radius: var(--radius-xs); padding: 0.5rem 0.75rem; margin: 0.5rem 0; }
.folder-permissions { max-height: 200px; overflow-y: auto; border: 1px solid var(--gray-200); border-radius: var(--radius-xs); padding: 0.75rem; background: white; }
.folder-checkbox, .tab-checkbox { margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; }
.folder-level-1 { margin-left: 1rem; } .folder-level-2 { margin-left: 2rem; } .folder-level-3 { margin-left: 3rem; }
.tab-permissions { background: var(--primary-25); border: 1px solid var(--primary-200); border-radius: var(--radius); padding: 0.75rem; margin-bottom: 0.75rem; }
.summary-box { background: var(--primary-25); border: 1px solid var(--primary-200); border-radius: var(--radius-xs); padding: 0.5rem 0.75rem; margin-bottom: 0.65rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.summary-value { font-size: 0.78rem; font-weight: 700; color: var(--primary-700); }
.summary-label { font-size: 0.6rem; color: var(--gray-500); }

/* Kundenhinweise */
.hinweis-item { background: white; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1rem; margin-bottom: 0.75rem; transition: box-shadow var(--transition); }
.hinweis-item:hover { box-shadow: var(--shadow); }
.hinweis-item.prioritaet-kritisch { border-left: 4px solid #dc2626; background: var(--error-light); }
.hinweis-item.prioritaet-hoch { border-left: 4px solid var(--warning); background: var(--warning-light); }
.hinweis-item.prioritaet-normal { border-left: 4px solid var(--info); background: var(--info-light); }
.hinweis-item.prioritaet-niedrig { border-left: 4px solid var(--gray-400); background: var(--gray-50); }
.hinweis-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
.hinweis-title { font-size: 0.88rem; font-weight: 600; color: var(--gray-900); flex: 1; }
.hinweis-content { margin-bottom: 0.75rem; line-height: 1.6; font-size: 0.8rem; }
.hinweis-meta { font-size: 0.68rem; color: var(--gray-500); margin-bottom: 0.75rem; }
.hinweis-actions { display: flex; gap: 0.35rem; }
.prioritaet-badge { padding: 0.2rem 0.5rem; border-radius: var(--radius-full); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: white; }
.prioritaet-badge.kritisch { background: #dc2626; }
.prioritaet-badge.hoch { background: var(--warning); }
.prioritaet-badge.normal { background: var(--info); }
.prioritaet-badge.niedrig { background: var(--gray-400); }

/* Techniker-Historie */
.techniker-item { background: white; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1rem; margin-bottom: 0.75rem; transition: all var(--transition); }
.techniker-item:hover { box-shadow: var(--shadow); }
.techniker-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.techniker-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--primary-100); display: flex; align-items: center; justify-content: center; font-size: 0.88rem; font-weight: 600; color: var(--primary-600); flex-shrink: 0; }
.techniker-info h5 { font-size: 0.88rem; font-weight: 600; color: var(--gray-900); margin: 0; }
.techniker-email { font-size: 0.75rem; color: var(--gray-500); }
.techniker-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.65rem; margin-top: 0.75rem; }
.techniker-stat { text-align: center; padding: 0.6rem; background: var(--gray-50); border-radius: var(--radius-sm); }
.techniker-stat-value { font-size: 0.88rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.15rem; }
.techniker-stat-label { font-size: 0.65rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.04em; }

/* Rechnungen/Montageberichte Stats */
.rechnungen-stats, .montageberichte-stats { margin-bottom: 0.75rem; }
.sort-icon { transition: opacity var(--transition-fast); }

/* Responsive Detail */
@media (max-width: 1024px) {
    .hero-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}
@media (max-width: 768px) {
    /* Nav Tabs - horizontal scrollbar statt wrap */
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0.2rem; padding: 0.3rem; scrollbar-width: none; }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tab { min-width: auto; flex: 0 0 auto; padding: 0.3rem 0.5rem; font-size: 0.62rem; gap: 0.25rem; }
    .nav-tab i { font-size: 0.6rem; }

    /* Hero */
    .hero-title h1 { font-size: 1.2rem !important; }
    .hero-subtitle { font-size: 0.72rem; gap: 0.5rem; flex-wrap: wrap; }
    .anruf-btn { font-size: 0.72rem; padding: 0.35rem 0.6rem; height: 28px; }

    /* Stat Cards in Hero */
    .stat-card { padding: 0.3rem 0.5rem !important; }
    .stat-value { font-size: 0.75rem !important; }
    .stat-label { font-size: 0.55rem !important; }

    /* Cards */
    .card { border-radius: var(--radius-sm); }
    .card-header { padding: 0.6rem 0.75rem; }
    .card-header h4 { font-size: 0.78rem; }
    .card-body { padding: 0.75rem; }

    /* Tables */
    .data-table { font-size: 0.68rem; display: block; overflow-x: auto; }
    .data-table th, .data-table td { padding: 0.3rem 0.4rem; white-space: nowrap; }

    /* Standorte */
    .kd-user-info { grid-template-columns: 1fr; }
    .techniker-stats { grid-template-columns: repeat(2, 1fr); }
    .standorte-controls { flex-direction: column; align-items: stretch; }
    .standorte-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.6rem 0.75rem; }
    .standorte-table { font-size: 0.68rem; display: block; overflow-x: auto; }
    .filiale-actions { flex-direction: column; align-items: stretch; }
    .filiale-assign-form { flex-direction: column; }

    /* Forms */
    .form-control { font-size: 14px !important; min-height: 36px; }
    .form-label { font-size: 0.72rem; }
    .btn { font-size: 0.72rem; min-height: 34px; }

    /* Modals */
    .modal-footer { flex-direction: column-reverse; }
    .modal-footer .btn { width: 100%; justify-content: center; }

    /* Iframe */
    .embedded-tab-frame { min-height: 400px; }

    /* Hinweise, Notizen, Techniker */
    .hinweis-item, .notiz-item, .techniker-item { padding: 0.75rem; margin-bottom: 0.5rem; }
    .hinweis-header { flex-direction: column; gap: 0.35rem; }
    .hinweis-content { font-size: 0.75rem; }
    .hinweis-meta, .notiz-meta { font-size: 0.65rem; }

    /* Summary Box */
    .summary-box { flex-direction: column; }
    .summary-item { padding: 0.5rem; }

    /* Folder Cards */
    .folder-card { margin-bottom: 0.5rem; }

    /* Bestellungen */
    .bestellung-card { padding: 0.75rem; }
}

/* Dark: Detail-Seiten */
:root.dark .hero-title h1 { color: var(--dark-text); }
:root.dark .hero-subtitle { color: var(--dark-text-dim); }
:root.dark .nav-tabs { background: var(--dark-surface) !important; border-color: var(--dark-border) !important; }
:root.dark .nav-tab { color: var(--dark-text-muted) !important; }
:root.dark .nav-tab:hover { background: var(--dark-surface-2) !important; color: var(--dark-text) !important; }
:root.dark .nav-tab.active { background: var(--primary-600) !important; color: white !important; }
:root.dark .card-header { background: transparent; border-color: var(--dark-border); }
:root.dark .card-header h4 { color: var(--dark-text); }
:root.dark .card-body { background: var(--dark-surface); color: var(--dark-text); }
/* Modal dark → definiert im globalen Modal-System Block */
:root.dark .rechnungsblock-header, :root.dark .data-table thead th.rechnungsblock-header, :root.dark .data-table tbody td.rechnungsblock-cell { background: rgba(226, 137, 19, 0.08); border-right-color: var(--dark-border); }
:root.dark .standorte-section { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .standorte-header { background: var(--dark-surface-2); border-color: var(--dark-border); }
:root.dark .standorte-section.collapsible.collapsed .standorte-header { background: var(--dark-surface); }
:root.dark .standorte-content { background: var(--dark-surface); }
:root.dark .standorte-table { background: var(--dark-surface); }
:root.dark .standorte-table th { background: var(--dark-surface-2); color: var(--dark-text-muted); }
:root.dark .standorte-table td { border-color: var(--dark-border); color: var(--dark-text); }
:root.dark .standorte-info { background: var(--primary-700); }
:root.dark .standorte-counter { background: var(--dark-surface-3); color: var(--dark-text-muted); }
:root.dark .search-controls { background: var(--dark-surface-2); border-color: var(--dark-border); }
:root.dark .form-control { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
:root.dark .form-label { color: var(--dark-text-muted); }
:root.dark .notiz-item { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .edit-form { border-color: var(--dark-border); }
:root.dark .kd-user-card { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .kd-user-card.expired { border-color: var(--error); background: rgba(239,68,68,0.08); }
:root.dark .kd-user-card.deactivated { border-color: var(--warning); background: rgba(245,158,11,0.08); }
:root.dark .kd-user-header { border-color: var(--dark-border); }
:root.dark .permissions-section { background: var(--dark-surface-2); }
:root.dark .folder-permissions { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .tab-permissions { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .summary-box { background: var(--dark-surface) !important; border-color: var(--dark-border) !important; }
:root.dark .summary-value { color: var(--primary-500) !important; }
:root.dark .summary-label { color: var(--dark-text-dim) !important; }
:root.dark .hinweis-item { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .hinweis-item.prioritaet-kritisch { background: rgba(239,68,68,0.08); }
:root.dark .hinweis-item.prioritaet-hoch { background: rgba(245,158,11,0.08); }
:root.dark .hinweis-item.prioritaet-normal { background: var(--dark-surface); }
:root.dark .hinweis-title { color: var(--dark-text); }
:root.dark .hinweis-meta, :root.dark .notiz-meta { color: var(--dark-text-dim); }
:root.dark .techniker-item { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .techniker-avatar { background: var(--dark-surface-3); color: var(--primary-500); }
:root.dark .techniker-info h5 { color: var(--dark-text); }
:root.dark .techniker-email { color: var(--dark-text-dim); }
:root.dark .techniker-stat { background: var(--dark-surface-2); }
:root.dark .techniker-stat-value { color: var(--dark-text); }
:root.dark .techniker-stat-label { color: var(--dark-text-dim); }
:root.dark .no-data { color: var(--dark-text-dim); }
:root.dark .no-data i { color: var(--dark-text-dim); }
:root.dark .no-data strong { color: var(--dark-text-muted); }
:root.dark .tab-pane { color: var(--dark-text); }
:root.dark .filiale-assign-form { background: var(--dark-surface-2); }
:root.dark .filiale-row.unassigned { }
:root.dark .section-divider { border-color: var(--dark-border); }


/* ── Rotating Cog Animation ────────────────────────────────── */
@keyframes rotateCog {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.status-abarbeitung .fa-cog,
.status-badge .fa-cog {
    animation: rotateCog 2s linear infinite;
}


/* ── File Manager ──────────────────────────────────────────── */
.fm {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.fm-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fm-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
}
.fm-bc-item {
    color: var(--primary-600);
    text-decoration: none;
    font-weight: 550;
}
.fm-bc-item:hover { text-decoration: underline; }
.fm-bc-sep { color: var(--gray-300); font-size: 0.6rem; }

.fm-toolbar-actions {
    display: flex;
    gap: 0.35rem;
}

.fm-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 320px;
}

.fm-sidebar {
    border-right: 1px solid var(--gray-200);
    padding: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: var(--gray-25);
}

.fm-tree-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: all var(--transition-fast);
    user-select: none;
}
.fm-tree-item:hover { background: var(--gray-100); }
.fm-tree-item.active {
    background: var(--primary-50);
    color: var(--primary-700);
    font-weight: 600;
}
.fm-tree-item.active i { color: var(--primary-600); }
.fm-tree-item i { color: var(--gray-400); font-size: 0.85rem; }
.fm-tree-item .file-count { margin-left: auto; }

/* Drag-over auf Ordner */
.fm-tree-item.drag-over {
    background: var(--primary-100);
    border: 1.5px dashed var(--primary-500);
    color: var(--primary-700);
}

.fm-dropzone {
    margin-top: auto;
    min-height: 60px;
    padding: 0.6rem;
    border-radius: var(--radius-sm);
}
.fm-dropzone i { font-size: 1rem; }
.fm-dropzone p { font-size: 0.65rem; }

.fm-content {
    padding: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* Datei-Zeile */
.fm-file {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    cursor: grab;
    background: white;
}
.fm-file:hover {
    border-color: var(--gray-300);
    background: var(--gray-25);
}
.fm-file.dragging {
    opacity: 0.4;
    border-style: dashed;
}

.fm-file-icon {
    font-size: 1.1rem;
    color: var(--error);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}
.fm-file-icon .fa-file-image { color: var(--info); }

.fm-file-info { flex: 1; min-width: 0; }
.fm-file-name {
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fm-file-meta {
    font-size: 0.68rem;
    color: var(--gray-500);
}

.fm-file-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.fm-file:hover .fm-file-actions { opacity: 1; }

@media (max-width: 768px) {
    .fm-layout { grid-template-columns: 1fr; }
    .fm-sidebar { border-right: none; border-bottom: 1px solid var(--gray-200); flex-direction: row; flex-wrap: wrap; padding: 0.5rem; }
    .fm-dropzone { display: none; }
    .fm-tree-item { font-size: 0.7rem; padding: 0.35rem 0.5rem; }
    .fm-file-actions { opacity: 1; }
}

/* Dark mode */
:root.dark .fm { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .fm-toolbar { background: var(--dark-surface-2); border-bottom-color: var(--dark-border); }
:root.dark .fm-bc-item { color: var(--primary-500); }
:root.dark .fm-sidebar { background: var(--dark-bg); border-right-color: var(--dark-border); }
:root.dark .fm-tree-item { color: var(--dark-text-muted); }
:root.dark .fm-tree-item:hover { background: var(--dark-surface-2); }
:root.dark .fm-tree-item.active { background: rgba(226, 137, 19, 0.1); color: var(--primary-500); }
:root.dark .fm-tree-item.drag-over { background: rgba(226, 137, 19, 0.15); border-color: var(--primary-500); }
:root.dark .fm-file { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .fm-file:hover { background: var(--dark-surface-2); border-color: var(--dark-border-light); }
:root.dark .fm-file-name { color: var(--dark-text); }
:root.dark .fm-file-meta { color: var(--dark-text-dim); }
:root.dark .fm-content { background: var(--dark-surface); }


/* ── File Upload Dropzone ──────────────────────────────────── */
.file-dropzone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    text-align: center;
    background: var(--gray-50);
    transition: all var(--transition);
    cursor: pointer;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.file-dropzone:hover,
.file-dropzone.dragover {
    background: var(--primary-25);
    border-color: var(--primary-500);
    box-shadow: var(--shadow-glow);
}
.file-dropzone i { font-size: 1.5rem; color: var(--primary-500); margin-bottom: 0.5rem; }
.file-dropzone h5 { font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.2rem; }
.file-dropzone p { font-size: 0.72rem; color: var(--gray-400); margin: 0; }

.upload-progress {
    width: 100%;
    height: 5px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-top: 0.5rem;
}
.upload-progress-bar {
    height: 100%;
    background: var(--primary-500);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: var(--radius-full);
}


/* ── Folder Accordion ──────────────────────────────────────── */
/* ── Ordnerstruktur ────────────────────────────────────────── */
.folder-item {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    margin-bottom: 0.4rem;
    overflow: hidden;
    transition: all 0.2s ease;
}
.folder-item:hover { border-color: var(--gray-300); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.folder-item.is-open {
    border-color: var(--primary-200);
    box-shadow: 0 2px 8px rgba(226,137,19,0.08);
}

.folder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.75rem;
    background: white;
    transition: background 0.2s ease;
    gap: 0.5rem;
}
.folder-item.is-open > .folder-header {
    background: linear-gradient(135deg, #fffbf0 0%, var(--gray-50) 100%);
    border-bottom: 1px solid var(--gray-100);
}

.folder-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    flex: 1;
    user-select: none;
    min-width: 0;
}
.folder-title:hover .folder-name { color: var(--primary-600); }

.toggle-icon {
    color: var(--gray-400);
    font-size: 0.55rem;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    background: var(--gray-100);
    transition: all 0.25s cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
}
.folder-item.is-open .toggle-icon {
    background: var(--primary-100);
    color: var(--primary-600);
    transform: rotate(90deg);
}

.folder-icon {
    color: var(--primary-500);
    font-size: 1rem;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(226,137,19,0.15));
    transition: all 0.2s ease;
}
.folder-item.is-open .folder-icon { color: var(--primary-600); transform: scale(1.05); }

.folder-name {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--gray-800);
    transition: color 0.15s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.file-count {
    color: var(--gray-400);
    font-size: 0.62rem;
    font-weight: 500;
    background: var(--gray-100);
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
    line-height: 1.4;
}

.folder-actions {
    display: flex;
    gap: 0.15rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.folder-header:hover .folder-actions { opacity: 1; }

.folder-content {
    display: none;
    padding: 0.5rem 0.75rem 0.75rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
    position: relative;
}
/* Verbindungslinie links */
.folder-content::before {
    content: '';
    position: absolute;
    left: 1.35rem;
    top: 0.5rem;
    bottom: 0.75rem;
    width: 1px;
    background: var(--gray-200);
}
/* Unterordner einrücken */
.folder-content .folder-item { margin-left: 0.75rem; }

/* ── Datei-Einträge ───────────────────────────────────────── */
.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.65rem;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    margin-bottom: 0.15rem;
    margin-left: 0.75rem;
    background: white;
    transition: all 0.15s ease;
    position: relative;
}
.file-item::before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: 50%;
    width: 0.5rem;
    height: 1px;
    background: var(--gray-200);
}
.file-item:hover { border-color: var(--primary-200); background: linear-gradient(135deg, var(--primary-25) 0%, white 100%); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.file-item:last-child { margin-bottom: 0; }

/* Drag Handle */
.drag-handle {
    color: var(--gray-300);
    font-size: 0.65rem;
    cursor: grab;
    padding: 0.25rem 0.15rem;
    flex-shrink: 0;
    transition: all 0.15s ease;
    opacity: 0.4;
}
.drag-handle:hover { color: var(--gray-500); opacity: 1; }
.drag-handle:active { cursor: grabbing; }
:root.dark .drag-handle { color: var(--dark-text-dim); }
:root.dark .drag-handle:hover { color: var(--dark-text-muted); }

/* Dragging States */
[draggable="true"] { cursor: grab; }
[draggable="true"]:active { cursor: grabbing; }
.file-item.dragging { opacity: 0.4; border: 1px dashed var(--primary-400); background: var(--primary-25); }
.folder-item.dragging { opacity: 0.4; border-style: dashed; border-color: var(--primary-400); }

.file-info { display: flex; align-items: center; gap: 0.45rem; flex: 1; min-width: 0; }
.file-icon { color: var(--error); font-size: 0.95rem; flex-shrink: 0; }
.file-details { flex: 1; min-width: 0; }
.file-name {
    font-weight: 550;
    font-size: 0.75rem;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-date { font-size: 0.65rem; color: var(--gray-400); }
.next-pruef { color: var(--info); font-weight: 550; }
.file-actions { display: flex; gap: 0.2rem; flex-shrink: 0; }


/* ── Custom Form Select ────────────────────────────────────── */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.4rem center;
    background-repeat: no-repeat;
    background-size: 1.2em 1.2em;
    padding-right: 2rem;
}


/* ── Section Icons (colored) ────────────────────────────────── */
.section-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.section-icon.revenue   { background: var(--success-light); color: #16a34a; }
.section-icon.employees { background: var(--info-light); color: #2563eb; }
.section-icon.orders    { background: var(--warning-light); color: #d97706; }
.section-icon.invoices  { background: var(--error-light); color: #dc2626; }


/* ── Metric Cards (KPI Widgets) ────────────────────────────── */
.metric-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem;
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--gray-200);
    transition: all var(--transition);
    cursor: pointer;
}
.metric-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.metric-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    gap: 0.4rem;
}

.metric-card-title {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

.metric-card-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.metric-card-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 0.2rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.metric-card-subtitle {
    font-size: 0.68rem;
    color: var(--gray-500);
    line-height: 1.4;
}

.metric-card-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-full);
    font-size: 0.62rem;
    font-weight: 600;
    margin-top: 0.35rem;
}
.metric-card-trend.positive { background: var(--success-light); color: #16a34a; }
.metric-card-trend.negative { background: var(--error-light); color: #dc2626; }
.metric-card-trend.neutral  { background: var(--gray-100); color: var(--gray-600); }


/* ── List Cards ────────────────────────────────────────────── */
.list-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem;
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--gray-200);
}

.list-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    letter-spacing: -0.01em;
}

.list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-100);
    gap: 0.5rem;
    font-size: 0.78rem;
    transition: background var(--transition-fast);
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--gray-25); }

.list-item-left {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.list-item-title {
    font-weight: 550;
    color: var(--gray-900);
    font-size: 0.78rem;
}
.list-item-title a { color: var(--primary-600); text-decoration: none; }
.list-item-title a:hover { text-decoration: underline; }

.list-item-subtitle {
    font-size: 0.68rem;
    color: var(--gray-500);
    line-height: 1.4;
}

.list-item-value {
    font-weight: 700;
    color: var(--gray-900);
    font-size: 0.78rem;
    white-space: nowrap;
}

.list-item-badge {
    font-size: 0.62rem;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    white-space: nowrap;
}
.list-item-badge.success { background: var(--success-light); color: #16a34a; }
.list-item-badge.warning { background: var(--warning-light); color: #d97706; }
.list-item-badge.error   { background: var(--error-light); color: #dc2626; }
.list-item-badge.info    { background: var(--info-light); color: #2563eb; }


/* ── Leaderboard (Top-3) ──────────────────────────────────── */
.leaderboard {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: var(--gray-25);
    border-radius: var(--radius);
    transition: background var(--transition-fast);
}
.leaderboard-item:hover { background: var(--gray-50); }

.leaderboard-rank {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.7rem;
    flex-shrink: 0;
}
.leaderboard-rank.first  { background: #ffd700; color: #92400e; }
.leaderboard-rank.second { background: #e5e7eb; color: var(--gray-700); }
.leaderboard-rank.third  { background: #cd7f32; color: white; }

.leaderboard-info { flex: 1; min-width: 0; }
.leaderboard-name {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leaderboard-details {
    font-size: 0.68rem;
    color: var(--gray-500);
    margin-top: 0.1rem;
}

.leaderboard-value { text-align: right; flex-shrink: 0; }
.leaderboard-revenue { font-weight: 700; color: var(--success); font-size: 0.78rem; }
.leaderboard-average { font-size: 0.68rem; color: var(--gray-500); margin-top: 0.1rem; }


/* ── Berater Info / Select ─────────────────────────────────── */
.berater-info {
    background: var(--primary-25);
    border: 1px solid var(--primary-200);
    border-radius: var(--radius);
    padding: 0.6rem 0.85rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.78rem;
}
.berater-info i { color: var(--primary-600); font-size: 0.9rem; }

.berater-select {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
    font-size: 0.78rem;
}


/* ── Floating Action Buttons (FABs) ───────────────────────── */
.fab {
    position: fixed;
    right: 1rem;
    z-index: 40;
    background: var(--primary-600);
    padding: 0.6rem 1rem;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: all var(--transition);
    color: white;
    text-decoration: none;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
}
.fab:hover {
    background: var(--primary-700);
    transform: scale(1.03);
    box-shadow: var(--shadow-xl);
}
.fab:active { transform: scale(0.97); }
.fab i { font-size: 1rem; flex-shrink: 0; }


/* ── Form Card / Section ───────────────────────────────────── */
.form-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    margin-bottom: 1.25rem;
}

.form-section {
    margin-bottom: 1.25rem;
}
.form-section h3 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.form-grid-full { grid-column: 1 / -1; }

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.checkbox-group input[type="checkbox"] { margin: 0; transform: scale(1.15); accent-color: var(--primary-600); }


/* ── Alerts ────────────────────────────────────────────────── */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.alert-error, .alert-danger {
    background: var(--error-light);
    border: 1px solid #fecaca;
    color: #991b1b;
}
.alert-success {
    background: var(--success-light);
    border: 1px solid #bbf7d0;
    color: #166534;
}

.btn-danger {
    background: var(--error);
    color: white;
    border-color: var(--error);
}
.btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: var(--shadow-md);
}


/* ── Autocomplete / Suchvorschläge ─────────────────────────── */
.autocomplete-results,
.kunde-suche-ergebnisse,
.artikel-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.2rem;
    max-height: 260px;
    overflow-y: auto;
    background: white;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    display: none;
}
.autocomplete-results.open,
.kunde-suche-ergebnisse[aria-hidden="false"],
.artikel-results.open { display: block; }

.autocomplete-item,
.kunde-suche-item,
.artikel-item {
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.8rem;
    transition: background var(--transition-fast);
}
.autocomplete-item:last-child,
.kunde-suche-item:last-child,
.artikel-item:last-child { border-bottom: none; }

.autocomplete-item:hover, .autocomplete-item.active,
.kunde-suche-item:hover, .kunde-suche-item--focused,
.artikel-item:hover, .artikel-item.active {
    background: var(--primary-25);
}

.kunde-suche-item small { display: block; color: var(--gray-500); margin-top: 0.15rem; font-size: 0.72rem; }
.kunde-suche-leer { padding: 0.75rem; color: var(--gray-400); text-align: center; font-size: 0.8rem; }
.kunde-such-wrapper, .artikel-search-wrap { position: relative; }

.artikel-nr { font-weight: 600; }
.artikel-bez { color: var(--gray-500); font-size: 0.75rem; }


/* ── Positions Summary ─────────────────────────────────────── */
.positions-summary {
    background: var(--gray-50);
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.65rem;
}

.summary-item { text-align: center; }
.summary-item .label { font-size: 0.72rem; color: var(--gray-500); margin-bottom: 0.1rem; }
.summary-item .value { font-size: 1rem; font-weight: 700; color: var(--primary-600); }
.summary-item.total .value { font-size: 1.1rem; color: var(--gray-900); }


/* ── Google Places Autocomplete ────────────────────────────── */
.pac-container { z-index: 1000; font-family: inherit; }


/* ── Dark: Form/Alert/Autocomplete/Summary ─────────────────── */
:root.dark .form-card { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .form-section h3 { color: var(--dark-text); border-bottom-color: var(--dark-border); }
:root.dark .alert-error, :root.dark .alert-danger { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.25); color: #f87171; }
:root.dark .alert-success { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.25); color: #4ade80; }
:root.dark .autocomplete-results, :root.dark .kunde-suche-ergebnisse, :root.dark .artikel-results {
    background: var(--dark-surface); border-color: var(--dark-border);
}
:root.dark .autocomplete-item, :root.dark .kunde-suche-item, :root.dark .artikel-item {
    color: var(--dark-text); border-bottom-color: var(--dark-border);
}
:root.dark .autocomplete-item:hover, :root.dark .kunde-suche-item:hover, :root.dark .artikel-item:hover {
    background: var(--dark-surface-2);
}
:root.dark .positions-summary { background: var(--dark-surface-2); border-color: var(--dark-border); }
:root.dark .summary-item .label { color: var(--dark-text-dim); }
:root.dark .summary-item .value { color: var(--dark-text); }
:root.dark .pac-container { background: var(--dark-surface) !important; border-color: var(--dark-border) !important; }
:root.dark .pac-item { background: var(--dark-surface) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; }
:root.dark .pac-item:hover { background: var(--dark-surface-2) !important; }
:root.dark .pac-item-query { color: var(--dark-text) !important; }


/* ── Ansprechpartner (Kontaktdaten) ─────────────────────────── */
.ansprechpartner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.65rem; }
.ansprechpartner-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.ansprechpartner-actions { display: flex; gap: 0.35rem; }

.ap-card { background: white; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 0.85rem; transition: all var(--transition); }
.ap-card:hover { border-color: var(--primary-300); box-shadow: var(--shadow); }
.ap-inactive { opacity: 0.4; }

.ap-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.ap-avatar { width: 34px; height: 34px; background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.6rem; flex-shrink: 0; }
.ap-name-block { flex: 1; min-width: 0; }
.ap-name { font-size: 0.8rem; font-weight: 600; color: var(--gray-900); display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }

.ap-badge { padding: 0.1rem 0.3rem; border-radius: var(--radius-xs); font-size: 0.5rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.15rem; }
.ap-badge-main { background: var(--success-light); color: #16a34a; }
.ap-badge-aktiv { background: var(--success-light); color: #16a34a; }
.ap-badge-inaktiv { background: var(--error-light); color: #dc2626; }
.ap-badge-inactive { background: var(--gray-100); color: var(--gray-500); }
.ap-badge-access { background: var(--primary-50); color: var(--primary-600); }
.ap-badge-doku { background: var(--info-light); color: #2563eb; }
.ap-badge-rechnung { background: var(--warning-light); color: #d97706; }
.ap-badge-montage { background: var(--special-light); color: var(--special); }

.ap-role { font-size: 0.68rem; color: var(--primary-600); font-weight: 500; margin-top: 0.1rem; }
.ap-actions { display: flex; gap: 0.2rem; flex-shrink: 0; }
.ap-action-btn { width: 28px; height: 28px; border: 1px solid var(--gray-200); border-radius: var(--radius-xs); background: white; color: var(--gray-500); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; transition: all var(--transition-fast); }
.ap-edit:hover { border-color: var(--info); color: var(--info); background: var(--info-light); }
.ap-delete:hover { border-color: var(--error); color: var(--error); background: var(--error-light); }

.ap-contact { display: flex; flex-wrap: wrap; gap: 0.15rem 0.75rem; margin-bottom: 0.4rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--gray-100); }
.ap-contact-item { font-size: 0.7rem; color: var(--gray-600); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; transition: color var(--transition-fast); }
.ap-contact-item i { color: var(--gray-400); font-size: 0.58rem; width: 12px; }
.ap-contact-item:hover { color: var(--primary-600); }
.ap-contact-item:hover i { color: var(--primary-600); }

.ap-note { background: var(--gray-50); border-left: 3px solid var(--primary-500); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; padding: 0.4rem 0.6rem; font-size: 0.65rem; color: var(--gray-600); line-height: 1.4; margin-bottom: 0.4rem; }
.ap-note i { color: var(--primary-500); margin-right: 0.2rem; font-size: 0.58rem; }

/* Zuordnungen */
.zuordnungen-section { border-top: 1px solid var(--gray-100); padding-top: 0.4rem; margin-top: 0.4rem; }
.zuordnungen-section strong { font-size: 0.62rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.03em; }
.zuordnungen-list { margin-top: 0.25rem; }
.zuordnung-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.55rem; background: var(--gray-50); border-radius: var(--radius-sm); margin-bottom: 0.35rem; font-size: 0.68rem; border: 1px solid var(--gray-200); }

.rolle-badge { padding: 0.15rem 0.35rem; border-radius: var(--radius-xs); font-size: 0.58rem; font-weight: 500; }
.rolle-hauptansprechpartner { background: var(--primary-50); color: var(--primary-700); }
.rolle-technischer { background: var(--info-light); color: #1d4ed8; }
.rolle-rechnungsempfaenger { background: var(--warning-light); color: #92400e; }
.rolle-sonstiger { background: var(--gray-100); color: var(--gray-600); }

/* Standort-Zuordnungen */
.ap-standort-item { padding: 0.5rem 0.65rem; background: var(--primary-25); border-radius: var(--radius-sm); margin-bottom: 0.45rem; border-left: 3px solid var(--primary-500); }
.ap-standort-name { font-size: 0.68rem; font-weight: 600; color: var(--primary-700); }
.ap-standort-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; margin-top: 0.15rem; }
.ap-standort-meta span { font-size: 0.6rem; color: var(--gray-500); display: inline-flex; align-items: center; gap: 0.2rem; }
.ap-standort-meta i { font-size: 0.5rem; color: var(--gray-300); }

.badge-kundenzugang { background: var(--primary-50); color: var(--primary-600); padding: 0.1rem 0.3rem; border-radius: var(--radius-xs); font-size: 0.5rem; font-weight: 600; }

/* Standort Items */
.standort-item { padding: 0.55rem 0.7rem; background: var(--primary-25); border-radius: var(--radius-sm); margin-bottom: 0.5rem; border-left: 3px solid var(--primary-500); }
.standort-name { font-size: 0.75rem; font-weight: 600; color: var(--primary-700); }
.standort-adresse { font-size: 0.68rem; color: var(--gray-500); }
.standort-auftrag { font-size: 0.65rem; color: var(--gray-400); }

@media (max-width: 768px) {
    .ansprechpartner-grid { grid-template-columns: 1fr; }
    .ansprechpartner-header { flex-direction: column; align-items: stretch; }
}

/* Dark: Ansprechpartner */
:root.dark .ap-card { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .ap-card:hover { border-color: var(--primary-500); }
:root.dark .ap-name { color: var(--dark-text); }
:root.dark .ap-role { color: var(--primary-500); }
:root.dark .ap-contact { border-color: var(--dark-border); }
:root.dark .ap-contact-item { color: var(--dark-text-muted); }
:root.dark .ap-contact-item i { color: var(--dark-text-dim); }
:root.dark .ap-note { background: var(--dark-surface-2); border-left-color: var(--primary-500); color: var(--dark-text-muted); }
:root.dark .ap-action-btn { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text-dim); }
:root.dark .ap-badge-main { background: rgba(34,197,94,0.12); color: #4ade80; }
:root.dark .ap-badge-aktiv { background: rgba(34,197,94,0.12); color: #4ade80; }
:root.dark .ap-badge-inaktiv { background: rgba(239,68,68,0.12); color: #f87171; }
:root.dark .ap-badge-inactive { background: var(--dark-surface-3); color: var(--dark-text-dim); }
:root.dark .ap-badge-access { background: rgba(226,137,19,0.12); color: var(--primary-500); }
:root.dark .ap-badge-doku { background: rgba(59,130,246,0.12); color: #60a5fa; }
:root.dark .ap-badge-rechnung { background: rgba(245,158,11,0.12); color: #fbbf24; }
:root.dark .ap-badge-montage { background: rgba(139,92,246,0.12); color: #a78bfa; }
:root.dark .zuordnungen-section { border-color: var(--dark-border); }
:root.dark .zuordnung-item { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
:root.dark .rolle-hauptansprechpartner { background: rgba(226,137,19,0.1); color: var(--primary-500); }
:root.dark .rolle-technischer { background: rgba(59,130,246,0.1); color: #93c5fd; }
:root.dark .rolle-rechnungsempfaenger { background: rgba(245,158,11,0.1); color: #fbbf24; }
:root.dark .rolle-sonstiger { background: var(--dark-surface-3); color: var(--dark-text-dim); }
:root.dark .ap-standort-item { background: rgba(226,137,19,0.06); border-left-color: var(--primary-500); }
:root.dark .ap-standort-name { color: var(--primary-500); }
:root.dark .ap-standort-meta span { color: var(--dark-text-dim); }
:root.dark .badge-kundenzugang { background: rgba(226,137,19,0.12); color: var(--primary-500); }
:root.dark .standort-item { background: rgba(226,137,19,0.06); border-left-color: var(--primary-500); }
:root.dark .standort-name { color: var(--primary-500); }
:root.dark .standort-adresse { color: var(--dark-text-dim); }


/* ── Prüftermine / Dashboard ────────────────────────────────── */
.dashboard { background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); margin-bottom: 1.25rem; overflow: hidden; }
.dashboard-header { padding: 1rem; border-bottom: 1px solid var(--gray-200); }
.dashboard-title { font-size: 0.95rem; font-weight: 600; color: var(--gray-900); display: flex; align-items: center; gap: 0.4rem; }
.dashboard-subtitle { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.15rem; }

.dashboard-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; padding: 1rem; }
.dashboard-stat { background: var(--gray-50); border-radius: var(--radius-sm); padding: 0.65rem; text-align: center; border: 1px solid var(--gray-100); }
.dashboard-stat.success { background: var(--success-light); border-color: #bbf7d0; }
.dashboard-stat.success .dashboard-stat-number { color: var(--success); }
.dashboard-stat.warning { background: var(--warning-light); border-color: #fde68a; }
.dashboard-stat.warning .dashboard-stat-number { color: var(--warning); }
.dashboard-stat.error { background: var(--error-light); border-color: #fecaca; }
.dashboard-stat.error .dashboard-stat-number { color: var(--error); }
.dashboard-stat-number { font-size: 1.25rem; font-weight: 800; color: var(--gray-900); letter-spacing: -0.02em; }

:root.dark .dashboard-stat.success { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.2); }
:root.dark .dashboard-stat.warning { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); }
:root.dark .dashboard-stat.error { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.2); }
.dashboard-stat-label { font-size: 0.65rem; color: var(--gray-500); font-weight: 600; }
.dashboard-stat-sublabel { font-size: 0.6rem; color: var(--gray-400); }

/* Controls */
.controls { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.controls-left, .controls-right { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }

/* Folder Cards (Prüftermine) */
.folders-container { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; }
.folder-card { background: white; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition); flex-shrink: 0; }
.folder-card:hover { border-color: var(--primary-200); }
.folder-card.expanded { border-color: var(--primary-300); box-shadow: var(--shadow); }
.folder-title-section { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; padding: 0.75rem 1rem; cursor: pointer; }
.folder-title-section:hover { background: var(--gray-25); }

/* Prüftermine Cards (.pt-*) */
.pt-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    margin-bottom: 0.35rem;
    overflow: hidden;
    transition: border-color var(--transition-fast);
    width: 100%;
    box-sizing: border-box;
    display: block;
}
.pt-card:hover { border-color: var(--primary-200); }
.pt-card.expanded { border-color: var(--primary-300); }

.pt-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    transition: background var(--transition-fast);
    font-size: 0.78rem;
    width: 100%;
}
.pt-header:hover { background: var(--gray-25); }

.pt-name {
    font-weight: 600;
    color: var(--gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.pt-counts {
    display: flex;
    gap: 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.pt-chevron {
    color: var(--gray-400);
    font-size: 0.7rem;
    transition: transform var(--transition);
    flex-shrink: 0;
}

.pt-header .order-status { flex-shrink: 0; }
.pt-header .text-muted { flex-shrink: 0; white-space: nowrap; }
.pt-card.expanded .pt-chevron { transform: rotate(180deg); }

.pt-details {
    display: none;
    border-top: 1px solid var(--gray-100);
    padding: 0.85rem;
}
.pt-card.expanded .pt-details { display: block; }

:root.dark .pt-card { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .pt-card:hover { border-color: var(--dark-border-light); }
:root.dark .pt-card.expanded { border-color: var(--primary-500); }
:root.dark .pt-header:hover { background: var(--dark-surface-2); }
:root.dark .pt-name { color: var(--dark-text); }
:root.dark .pt-details { border-top-color: var(--dark-border); }

.folder-meta { flex-shrink: 0; }
.folder-path { font-size: 0.6rem; color: var(--gray-400); }
.folder-meta { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.meta-badge { padding: 0.15rem 0.4rem; border-radius: var(--radius-full); font-size: 0.6rem; font-weight: 600; }
.meta-badge.general { background: var(--gray-100); color: var(--gray-600); }
.folder-summary { display: flex; gap: 0.75rem; align-items: center; justify-content: flex-end; white-space: nowrap; }
.summary-stat { text-align: center; font-size: 0.65rem; }
.summary-stat strong { display: block; font-size: 0.85rem; }
.expand-icon { transition: transform var(--transition); font-size: 0.75rem; color: var(--gray-400); }
.folder-card.expanded .expand-icon { transform: rotate(180deg); }

/* Folder Details */
.folder-details { display: none; border-top: 1px solid var(--gray-200); padding: 1rem; }
.folder-card.expanded .folder-details { display: block; }
.stats-container { display: flex; gap: 1rem; margin-bottom: 0.75rem; }
.stats-main { display: flex; gap: 0.5rem; flex: 1; }
.stat-box { flex: 1; padding: 0.6rem; border-radius: var(--radius-sm); text-align: center; }
.stat-box.bestanden { background: var(--success-light); border: 1px solid #bbf7d0; }
.stat-box.leichte { background: var(--warning-light); border: 1px solid #fde68a; }
.stat-box.durchgefallen { background: var(--error-light); border: 1px solid #fecaca; }
.stat-number { font-size: 1.1rem; font-weight: 800; }
.stat-box.bestanden .stat-number { color: var(--success); }
.stat-box.leichte .stat-number { color: var(--warning); }
.stat-box.durchgefallen .stat-number { color: var(--error); }

.stats-details { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.detail-section { background: var(--gray-50); border-radius: var(--radius-sm); padding: 0.65rem; }
.detail-title { font-size: 0.68rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.3rem; }
.dates-grid { display: flex; flex-direction: column; gap: 0.25rem; }
.date-item { font-size: 0.72rem; color: var(--gray-600); display: flex; justify-content: space-between; }
.date-badge { font-size: 0.6rem; padding: 0.1rem 0.35rem; border-radius: var(--radius-full); font-weight: 600; }
.avg-dates { display: flex; gap: 0.5rem; }
.avg-date { font-size: 0.72rem; color: var(--gray-600); }

.summary-stats { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.summary-row { display: flex; gap: 0.35rem; align-items: center; font-size: 0.72rem; }
.percentage-success { color: var(--success); font-weight: 600; }
.percentage-warning { color: var(--warning); font-weight: 600; }
.percentage-error { color: var(--error); font-weight: 600; }

.alert-warning { background: var(--warning-light); border: 1px solid #fde68a; border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; font-size: 0.78rem; color: #92400e; }
.critical { color: var(--error); font-weight: 600; }
.good { color: var(--success); font-weight: 600; }

/* Print */
.no-print { }
@media print { .no-print { display: none !important; } }

/* Export Header (Print) */
.export-header { display: none; }
@media print { .export-header { display: block; margin-bottom: 1rem; } }

/* Responsive */
@media (max-width: 768px) {
    .dashboard-stats { grid-template-columns: repeat(2, 1fr); }
    .controls { flex-direction: column; align-items: stretch; }
    .stats-container { flex-direction: column; }
    .stats-details { grid-template-columns: 1fr; }
    .folder-title-section { flex-direction: column; align-items: flex-start; }
    .folder-summary { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* Dark: Prüftermine */
:root.dark .dashboard { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .dashboard-header { border-bottom-color: var(--dark-border); }
:root.dark .dashboard-title { color: var(--dark-text); }
:root.dark .dashboard-stat { background: var(--dark-surface-2); border-color: var(--dark-border); }
:root.dark .dashboard-stat-number { color: var(--dark-text); }
:root.dark .folder-card { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .folder-card:hover { border-color: var(--dark-border-light); }
:root.dark .folder-details { border-top-color: var(--dark-border); }
:root.dark .detail-section { background: var(--dark-surface-2); }
:root.dark .stat-box.bestanden { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.2); }
:root.dark .stat-box.leichte { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); }
:root.dark .stat-box.durchgefallen { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.2); }
:root.dark .alert-warning { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); color: #fbbf24; }


/* ── Prüfberichte-spezifisch ────────────────────────────────── */
.custom-file-selector {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 2rem 1.25rem;
    text-align: center;
    background: var(--gray-50);
    transition: all 0.25s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    min-height: 120px;
    overflow: hidden;
}
.custom-file-selector:hover, .custom-file-selector.dragover {
    background: #fff7ed;
    border-color: var(--primary-400);
    box-shadow: inset 0 0 0 1px var(--primary-200);
}
.custom-file-selector.dragover {
    border-color: var(--primary-500);
    background: #fef3c7;
    box-shadow: inset 0 0 0 2px var(--primary-300);
}
.custom-file-selector > .fas,
.custom-file-selector > .fa-cloud-arrow-up {
    font-size: 1.75rem;
    color: var(--primary-500);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
.custom-file-selector:hover > .fas,
.custom-file-selector:hover > .fa-cloud-arrow-up { opacity: 1; }
.custom-file-selector h5 { font-size: 0.85rem; font-weight: 700; color: var(--gray-800); margin: 0; }
.custom-file-selector p { font-size: 0.7rem; color: var(--gray-400); margin: 0; letter-spacing: 0.02em; }

/* Upload bereit */
.custom-file-selector.has-files {
    border-style: solid;
    border-color: var(--success);
    background: #f0fdf4;
    cursor: default;
    padding: 1.25rem;
    min-height: auto;
}
.custom-file-selector.has-files:hover { background: #f0fdf4; box-shadow: none; }
.upload-ready {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem;
    padding: 0.15rem 0;
}
.upload-ready-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
}
.upload-ready-info > .fas { font-size: 1.35rem; }
.upload-ready-info strong { display: block; font-size: 0.8rem; color: var(--gray-800); margin-bottom: 0.1rem; }
.upload-ready-info .text-muted { font-size: 0.68rem; }
.upload-ready-actions { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }

.upload-status { margin-top: 0.5rem; padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); display: none; border: 1px solid var(--gray-200); font-size: 0.78rem; background: white; }
.upload-status.success { border-left: 3px solid var(--success); display: block; }
.upload-status.error { border-left: 3px solid var(--error); display: block; }
.upload-status.info { border-left: 3px solid var(--info); display: block; }
.upload-status-inner { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.4rem; }
.upload-status-inner .spinner-brand { flex-shrink: 0; }
.upload-status-text { flex: 1; min-width: 0; }
.upload-status.success .spinner-brand { display: none; }
.upload-status.error .spinner-brand { display: none; }

.rename-form { display: none; margin: 0.3rem 0.5rem 0; padding: 0.4rem 0; border-top: 1px solid var(--gray-200); }
.rename-form-inner { display: flex; gap: 0.5rem; align-items: end; }
.rename-form-inner .form-control { flex: 1; }

.alert-info { background: var(--info-light); border: 1px solid #93c5fd; color: #1e3a8a; }

.pagination-link { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 0.35rem; background: white; border: 1px solid var(--gray-200); border-radius: var(--radius-xs); text-decoration: none; color: var(--gray-600); font-size: 0.72rem; font-weight: 500; transition: all var(--transition-fast); }
.pagination-link:hover { background: var(--primary-25); border-color: var(--primary-300); color: var(--primary-700); }
.pagination-link.active { background: var(--primary-600); border-color: var(--primary-600); color: white; font-weight: 600; }

/* Folder Drop Target */
.folder-drop-target {
    transition: all var(--transition-fast);
}
/* Alle Ordner-Headers als Drop-Target grün markieren */
.folder-header.drag-over,
.folder-drop-target.drag-over {
    background: #dcfce7 !important;
    border: 2px solid #22c55e;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 3px rgba(34,197,94,0.15), 0 2px 8px rgba(34,197,94,0.1);
}
.folder-header.drag-over .folder-icon,
.folder-drop-target.drag-over .folder-icon { color: #16a34a; }
.folder-header.drag-over .folder-name,
.folder-drop-target.drag-over .folder-name { color: #15803d; font-weight: 700; }
.folder-header.drag-over .file-count,
.folder-drop-target.drag-over .file-count { background: #bbf7d0; color: #166534; }
:root.dark .folder-header.drag-over,
:root.dark .folder-drop-target.drag-over { background: rgba(34,197,94,0.12) !important; border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.1); }
:root.dark .folder-header.drag-over .folder-icon,
:root.dark .folder-drop-target.drag-over .folder-icon { color: #4ade80; }
:root.dark .folder-header.drag-over .folder-name,
:root.dark .folder-drop-target.drag-over .folder-name { color: #86efac; }

/* Dark: Prüfberichte */
:root.dark .custom-file-selector { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .custom-file-selector:hover, :root.dark .custom-file-selector.dragover { background: var(--dark-surface-2); border-color: var(--primary-500); }
:root.dark .custom-file-selector h5 { color: var(--dark-text); }
:root.dark .custom-file-selector.has-files { background: linear-gradient(135deg, #052e16 0%, var(--dark-surface) 100%); border-color: var(--success); }
:root.dark .upload-ready-info strong { color: var(--dark-text); }
:root.dark .upload-status { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .upload-status.success { border-left-color: var(--success); }
:root.dark .upload-status.error { border-left-color: var(--error); }
:root.dark .upload-status.info { border-left-color: var(--info); }
:root.dark .rename-form { border-top-color: var(--dark-border); }
:root.dark .pagination-link { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text-muted); }
:root.dark .pagination-link:hover { background: var(--dark-surface-3); border-color: var(--primary-500); color: var(--primary-500); }
:root.dark .pagination-link.active { background: var(--primary-600); border-color: var(--primary-600); color: white; }
:root.dark .alert-info { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.25); color: #60a5fa; }


/* ── Bestellungen ──────────────────────────────────────────── */
.bestellungen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1rem; }

.bestellung-card { background: white; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.15rem; box-shadow: var(--shadow-xs); transition: all var(--transition); position: relative; }
.bestellung-card:hover { border-color: var(--primary-200); box-shadow: var(--shadow); }
.bestellung-card.status-pausiert { background: var(--gray-50); opacity: 0.8; }
.bestellung-card.status-abgeschlossen { border-left: 3px solid var(--success); }
.bestellung-card.status-gekuendigt { border-left: 3px solid var(--error); opacity: 0.7; }
.bestellung-card.bestellung-hidden { display: none !important; }

.bestellung-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
.bestellung-title h5 { margin: 0 0 0.3rem 0; font-size: 0.88rem; font-weight: 600; color: var(--gray-800); }
.bestellung-nummer { font-size: 0.75rem; color: var(--gray-500); font-weight: 500; }
.bestellung-badges { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-end; }
.badge-jahres { background: var(--primary-100); color: var(--primary-700); padding: 0.15rem 0.45rem; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: 600; }

.bestellung-beschreibung { margin-bottom: 0.75rem; padding: 0.6rem; background: var(--gray-50); border-radius: var(--radius-sm); font-size: 0.78rem; line-height: 1.5; border-left: 3px solid var(--gray-300); }
.bestellung-details { margin-bottom: 0.75rem; }
.detail-row { margin-bottom: 0.35rem; font-size: 0.78rem; line-height: 1.4; }
.detail-row strong { color: var(--gray-600); margin-right: 0.35rem; }

.pruefung-info { background: var(--info-light); border: 1px solid #93c5fd; border-radius: var(--radius-sm); padding: 0.75rem; margin-top: 0.75rem; font-size: 0.78rem; }
.bestellung-bemerkungen { background: var(--warning-light); border: 1px solid #fde68a; border-radius: var(--radius-sm); padding: 0.6rem; margin-top: 0.75rem; font-size: 0.78rem; }
.bestellung-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; padding-top: 0.75rem; border-top: 1px solid var(--gray-200); }

.status-success { color: var(--success); font-weight: 550; }
.status-warning { color: var(--warning); font-weight: 550; }
.status-error   { color: var(--error); font-weight: 550; }
.status-info    { color: var(--info); font-weight: 550; }
.status-neutral { color: var(--gray-500); }

.status-aktiv       { background: var(--success-light); color: #065f46; }
.status-pausiert    { background: var(--warning-light); color: #92400e; }
.status-gekuendigt  { background: var(--error-light); color: #991b1b; }

.filter-actions, .form-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.checkbox-container { display: flex; align-items: center; cursor: pointer; font-size: 0.8rem; user-select: none; }
.checkbox-container input { margin-right: 0.5rem; accent-color: var(--primary-600); }

/* Toggle Switch (iOS-Style) */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-top: 0.35rem;
    text-transform: none;
    white-space: nowrap;
}
.toggle-switch input { display: none; }
.toggle-track {
    width: 36px;
    height: 20px;
    background: var(--gray-300);
    border-radius: var(--radius-full);
    position: relative;
    transition: background var(--transition);
    flex-shrink: 0;
}
.toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform var(--transition);
}
.toggle-switch input:checked + .toggle-track {
    background: var(--success);
}
.toggle-switch input:checked + .toggle-track::after {
    transform: translateX(16px);
}
.toggle-switch:hover .toggle-track {
    background: var(--gray-400);
}
.toggle-switch:hover input:checked + .toggle-track {
    background: #16a34a;
}

/* Toggle Group (Zeile mit mehreren Toggles) */
.toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-100);
}
.toggle-group:last-child { border-bottom: none; }
:root.dark .toggle-group { border-bottom-color: var(--dark-border); }

/* Dark: Toggle */
:root.dark .toggle-track { background: var(--dark-border); }
:root.dark .toggle-switch { color: var(--dark-text-muted); }
:root.dark .toggle-switch input:checked + .toggle-track { background: var(--success); }
:root.dark .toggle-switch:hover .toggle-track { background: var(--dark-border-light); }
.modal-large { max-width: 700px; }

/* Historie-Timeline */
.historie-timeline { max-height: 400px; overflow-y: auto; }
.historie-item { display: flex; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--gray-200); }
.historie-item:last-child { border-bottom: none; }
.historie-datum { flex-shrink: 0; width: 85px; font-weight: 600; color: var(--primary-600); font-size: 0.78rem; }
.historie-details { flex: 1; font-size: 0.78rem; }
.historie-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; }
.historie-bemerkungen { background: var(--gray-50); padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); margin: 0.35rem 0; font-size: 0.78rem; border-left: 3px solid var(--gray-300); }

/* Embedded Mode (iframe) */
body.embedded-mode { background: transparent !important; margin: 0 !important; padding: 0 !important; min-height: auto !important; }
body.embedded-mode main { padding: 0 !important; margin: 0 !important; }
body.embedded-mode .container { max-width: 100% !important; padding: 0 0.5rem !important; margin: 0 !important; }
body.embedded-mode .hero { display: none !important; }
body.embedded-mode .elexx-header, body.embedded-mode .elexx-breadcrumb-bar, body.embedded-mode .elexx-footer, body.embedded-mode .elexx-ticker-bar { display: none !important; }
body.embedded-mode .custom-file-selector { padding: 0.75rem; margin-bottom: 0.5rem; }
body.embedded-mode .custom-file-selector > .fas { font-size: 1rem; }
body.embedded-mode .custom-file-selector h5 { font-size: 0.72rem; }
body.embedded-mode .custom-file-selector p { font-size: 0.62rem; }
body.embedded-mode .card { margin-bottom: 0.65rem; }
body.embedded-mode .card-header { padding: 0.5rem 0.75rem; }
body.embedded-mode .card-header h4 { font-size: 0.78rem; }
body.embedded-mode .folder-item { margin-bottom: 0.3rem; }
body.embedded-mode .folders-container,
body.embedded-mode .folder-card,
body.embedded-mode .dashboard,
body.embedded-mode .controls { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
body.embedded-mode .folder-header { padding: 0.4rem 0.55rem; }
body.embedded-mode .file-item { padding: 0.3rem 0.5rem; margin-bottom: 0.2rem; }
body.embedded-mode .upload-status { margin-bottom: 0.5rem; }

/* Embedded: Modal bricht aus dem iframe aus */
body.embedded-mode .modal-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    /* Bestellungen */
    .bestellungen-grid { grid-template-columns: 1fr; }
    .bestellung-header { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .bestellung-badges { flex-direction: row; align-items: flex-start; }
    .bestellung-actions, .filter-actions { flex-direction: column; }
    .bestellung-card { padding: 0.65rem; font-size: 0.72rem; }
    .bestellung-details { font-size: 0.68rem; }

    /* Embedded Mode (iframes in kunden_detail) */
    body.embedded-mode .container { padding: 0 0.25rem !important; }
    body.embedded-mode .card-body { padding: 0.5rem; }
    body.embedded-mode .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.35rem; }
    body.embedded-mode .stat-card { padding: 0.4rem; }
    body.embedded-mode .stat-value { font-size: 0.85rem; }
    body.embedded-mode .stat-label { font-size: 0.6rem; }

    /* Ansprechpartner (kontaktdaten.php) */
    .ansprechpartner-grid { grid-template-columns: 1fr !important; }
    .ap-card { padding: 0.65rem; }
    .ap-top { flex-direction: column; gap: 0.5rem; }
    .ap-avatar { width: 32px; height: 32px; font-size: 0.65rem; }
    .ap-name { font-size: 0.78rem; }
    .ap-badge { font-size: 0.55rem; padding: 0.1rem 0.25rem; }
    .ap-contact { font-size: 0.65rem; gap: 0.1rem 0.5rem; }
    .ap-contact-item { font-size: 0.65rem; }
    .ap-note { font-size: 0.62rem; padding: 0.3rem 0.5rem; }
    .ap-action-btn { width: 24px; height: 24px; font-size: 0.55rem; }
    .zuordnung-item { font-size: 0.62rem; padding: 0.25rem 0.4rem; }
    .ap-standort-item { padding: 0.35rem 0.5rem; }
    .ap-standort-name { font-size: 0.62rem; }
    .filter-row { grid-template-columns: 1fr !important; gap: 0.5rem !important; }
    .filter-row-2 { grid-template-columns: 1fr !important; }
    .toggle-group { gap: 0.35rem 0.75rem; }
    .toggle-switch { font-size: 0.68rem; }
    .edit-form { padding: 0.6rem; }
    .form-actions { flex-direction: column; gap: 0.35rem; }
    .form-actions .btn { width: 100%; justify-content: center; }

    /* Prüfberichte (pruefberichte.php) */
    .folder-card { margin-bottom: 0.35rem; }
    .folder-header { padding: 0.4rem 0.5rem; }
    .folder-header h4 { font-size: 0.72rem; }
    .folder-summary { gap: 0.4rem; }
    .summary-stat { font-size: 0.58rem; }
    .summary-stat strong { font-size: 0.72rem; }
    .folder-details { padding: 0.6rem; }
    .stats-main { flex-direction: column; gap: 0.35rem; }
    .stat-box { padding: 0.4rem; }
    .stat-number { font-size: 0.85rem; }
    .stats-details { grid-template-columns: 1fr; }
    .file-item { flex-direction: column; gap: 0.35rem; align-items: stretch; }
    .file-actions { justify-content: flex-start; }

    /* Prüftermine (prueftermine.php) */
    .historie-item { flex-direction: column; gap: 0.25rem; }
    .historie-datum { width: auto; }
}

/* Dark: Bestellungen */
:root.dark .bestellung-card { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .bestellung-card:hover { border-color: var(--dark-border-light); }
:root.dark .bestellung-card.status-abgeschlossen { background: rgba(34,197,94,0.06); border-left-color: var(--success); }
:root.dark .bestellung-card.status-gekuendigt { background: rgba(239,68,68,0.06); border-left-color: var(--error); }
:root.dark .bestellung-title h5 { color: var(--dark-text); }
:root.dark .bestellung-nummer { color: var(--dark-text-dim); }
:root.dark .bestellung-beschreibung { background: var(--dark-surface-2); border-left-color: var(--dark-border); color: var(--dark-text-muted); }
:root.dark .bestellung-details, :root.dark .detail-row { color: var(--dark-text); }
:root.dark .detail-row strong { color: var(--dark-text-muted); }
:root.dark .bestellung-actions { border-top-color: var(--dark-border); }
:root.dark .pruefung-info { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.2); color: var(--dark-text); }
:root.dark .bestellung-bemerkungen { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); color: var(--dark-text); }
:root.dark .badge-jahres { background: rgba(226,137,19,0.12); color: var(--primary-500); }
:root.dark .status-aktiv { background: rgba(34,197,94,0.12); color: #4ade80; }
:root.dark .status-pausiert { background: rgba(245,158,11,0.12); color: #fbbf24; }
:root.dark .status-gekuendigt { background: rgba(239,68,68,0.12); color: #f87171; }
:root.dark .status-success { color: #4ade80; }
:root.dark .status-warning { color: #fbbf24; }
:root.dark .status-error { color: #f87171; }
:root.dark .status-info { color: #60a5fa; }
:root.dark .status-neutral { color: var(--dark-text-dim); }
:root.dark .historie-item { border-bottom-color: var(--dark-border); }
:root.dark .historie-bemerkungen { background: var(--dark-surface-2); border-left-color: var(--dark-border); color: var(--dark-text-muted); }
:root.dark .btn-outline-primary { border-color: rgba(226,137,19,0.3); color: var(--primary-500); }
:root.dark .btn-outline-primary:hover { background: rgba(226,137,19,0.08); }
:root.dark .btn-outline-success { border-color: rgba(34,197,94,0.3); color: #4ade80; }
:root.dark .btn-outline-success:hover { background: rgba(34,197,94,0.08); }
:root.dark .btn-outline-warning, .btn-outline-info { border-color: var(--dark-border); }
:root.dark .btn-outline-warning { color: #fbbf24; }
:root.dark .btn-outline-warning:hover { background: rgba(245,158,11,0.08); }
:root.dark .btn-outline-danger { border-color: rgba(239,68,68,0.3); color: #f87171; }
:root.dark .btn-outline-danger:hover { background: rgba(239,68,68,0.08); }
:root.dark .btn-outline-info { color: #60a5fa; }
:root.dark .btn-outline-info:hover { background: rgba(59,130,246,0.08); }


/* ── Leaflet Map Overrides ─────────────────────────────────── */
.leaflet-container { z-index: 1 !important; }
.leaflet-pane { z-index: 1 !important; }
.leaflet-popup-pane { z-index: 40 !important; }
.leaflet-control { z-index: 40 !important; }
.leaflet-top, .leaflet-bottom { z-index: 40 !important; }


/* ── Dashboard Page (.page-dashboard) ──────────────────────── */
/* Sidebar-Panels: standardmäßig off-screen */
.abwesend-panel { position: fixed; right: -320px; }
.abwesend-panel.open { right: 0; }
.zentralanruf-panel { position: fixed; left: -460px; }
.zentralanruf-panel.open { left: 0; }
.birthday-panel { position: fixed; right: -320px; }
.birthday-panel.open { right: 0; }
.nightshift-panel { position: fixed; right: -320px; }
.nightshift-panel.open { right: 0; }

/* Dashboard: alte Sidebar-Widgets komplett ausblenden */
.page-dashboard .abwesend-panel, .page-dashboard .abwesend-overlay, .page-dashboard .abwesend-toggle,
.page-dashboard .birthday-panel, .page-dashboard .birthday-overlay, .page-dashboard .birthday-toggle,
.page-dashboard .nightshift-panel, .page-dashboard .nightshift-overlay, .page-dashboard .nightshift-toggle,
.page-dashboard .zentralanruf-panel, .page-dashboard .zentralanruf-overlay, .page-dashboard .zentralanruf-toggle,
.page-dashboard .quicklinks-sidebar, .page-dashboard .quicklink-modal { display: none !important; }

.page-dashboard .main-functions .cards-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.page-dashboard .administration .cards-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.page-dashboard .card {
    min-height: 140px;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.page-dashboard .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--primary-500) 15%, var(--primary-500) 85%, transparent);
    border-radius: 0 0 2px 2px;
}

.page-dashboard .card-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.6rem;
    font-size: 1.15rem;
    background: rgba(226, 137, 19, 0.08);
    color: var(--primary-600);
    border: 1.5px solid rgba(226, 137, 19, 0.15);
    position: relative;
    transition: all 0.3s ease;
}
.page-dashboard .card:hover {
    background: rgba(226, 137, 19, 0.015);
    border-color: rgba(226, 137, 19, 0.06);
}
:root.dark .page-dashboard .card:hover {
    background: rgba(226, 137, 19, 0.02);
    border-color: rgba(226, 137, 19, 0.05);
}

.page-dashboard .card h3 {
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    letter-spacing: -0.01em;
}

.page-dashboard .card p {
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.45;
    flex: 1;
    margin-bottom: 0.65rem;
}

.page-dashboard .card-actions {
    display: flex;
    gap: 0.3rem;
    flex-wrap: nowrap;
    margin-top: auto;
}

.page-dashboard .card.restricted { opacity: 0.6; pointer-events: none; }

@media (max-width: 768px) {
    .page-dashboard .hero { padding: 1.5rem 0 1rem; }
    .page-dashboard .container { padding: 0 1rem !important; }
    .page-dashboard .hero { padding: 1.5rem 0 1rem !important; margin-bottom: 0.5rem !important; }
    .page-dashboard .hero h1 { font-size: 1.3rem !important; }
    .page-dashboard .hero p { font-size: 0.8rem !important; margin-top: 0.25rem !important; }
    .page-dashboard .cards-grid,
    .page-dashboard .main-functions .cards-grid,
    .page-dashboard .administration .cards-grid {
        grid-template-columns: 1fr;
    }
    .page-dashboard .card { min-height: auto; padding-top: 1rem !important; }
    .page-dashboard .card-actions,
    .page-dashboard .dash-card-actions { flex-wrap: wrap; }
    .page-dashboard .card-actions .btn,
    .page-dashboard .dash-card-actions .btn { white-space: normal; width: 100%; justify-content: center; font-size: 0.78rem; }
}

@media (min-width: 1024px) and (max-width: 1400px) {
    .page-dashboard .main-functions .cards-grid,
    .page-dashboard .administration .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Darkmode Dashboard */
:root.dark .page-dashboard .card-icon {
    background: rgba(226, 137, 19, 0.15);
    color: var(--primary-500);
}
:root.dark .page-dashboard .card p { color: var(--dark-text-dim); }


/* ── Login Page ─────────────────────────────────────────────── */
body.login-page {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: #0f172a;
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(226, 137, 19, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
    color: #e2e8f0;
    font-size: inherit;
    overflow-x: auto;
}

:root:not(.dark) body.login-page {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--primary-50) 100%);
    color: var(--gray-800);
}

.login-page .login-container {
    width: 100%;
    max-width: 420px;
}

.login-page .login-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-2xl);
    padding: 2.5rem 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

:root:not(.dark) .login-page .login-card {
    background: white;
    border-color: var(--gray-200);
    box-shadow: var(--shadow-xl);
}

.login-page .form-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-page .form-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 0.4rem;
    letter-spacing: -0.03em;
}
:root:not(.dark) .login-page .form-title { color: var(--gray-900); }

.login-page .form-subtitle {
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
}
:root:not(.dark) .login-page .form-subtitle { color: var(--gray-500); }

.login-page .login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.login-page .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0;
    position: static;
}

.login-page .form-group label {
    font-weight: 500;
    color: #94a3b8;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0;
}
:root:not(.dark) .login-page .form-group label { color: var(--gray-500); }

.login-page .input-wrapper {
    position: relative;
}

.login-page .input-wrapper i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #475569;
    font-size: 0.8rem;
    transition: color var(--transition);
}
.login-page .input-wrapper:focus-within i { color: var(--primary-500); }
:root:not(.dark) .login-page .input-wrapper i { color: var(--gray-400); }

.login-page .form-input {
    width: 100%;
    padding: 0.7rem 0.85rem 0.7rem 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.04);
    color: #f1f5f9;
    transition: all var(--transition);
}
.login-page .form-input:focus {
    outline: none;
    border-color: var(--primary-500);
    background: rgba(226, 137, 19, 0.04);
    box-shadow: var(--shadow-glow);
}
.login-page .form-input::placeholder { color: #475569; }

:root:not(.dark) .login-page .form-input {
    background: white;
    border-color: var(--gray-200);
    color: var(--gray-800);
}
:root:not(.dark) .login-page .form-input:focus { background: white; }
:root:not(.dark) .login-page .form-input::placeholder { color: var(--gray-400); }

.login-page .login-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.78rem;
    text-align: center;
    line-height: 1.6;
}
:root:not(.dark) .login-page .login-error {
    background: var(--error-light);
    border-color: #fecaca;
    color: #dc2626;
}
.login-page .login-error a { color: var(--primary-500); text-decoration: none; font-weight: 600; }
.login-page .login-error a:hover { text-decoration: underline; }

.login-page .login-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 1.5rem 0 1rem;
}
:root:not(.dark) .login-page .login-divider { background: var(--gray-200); }

.login-page .login-footer { text-align: center; }
.login-page .login-footer-text { font-size: 0.68rem; color: #475569; margin-bottom: 0.25rem; }
.login-page .login-footer-link { color: var(--primary-500); text-decoration: none; font-weight: 500; font-size: 0.68rem; }
.login-page .login-footer-link:hover { color: var(--primary-700); }
:root:not(.dark) .login-page .login-footer-text { color: var(--gray-400); }

.login-page .login-logo { display: inline-block; margin-bottom: 1.5rem; }
.login-page .login-logo img { height: 65px; width: auto; filter: brightness(1.1); }
.login-page .login-logo .logo-light { display: none; }
:root:not(.dark) .login-page .login-logo .logo-light { display: inline-block; }
:root:not(.dark) .login-page .login-logo .logo-dark { display: none; }
:root:not(.dark) .login-page .login-logo img { filter: none; }

.login-page .login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    color: white;
    transition: all 0.3s ease;
    margin-top: 0.25rem;
    position: relative;
    overflow: hidden;
}
.login-page .login-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    opacity: 0;
    transition: opacity 0.3s;
}
.login-page .login-btn:hover::before { opacity: 1; }
.login-page .login-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 25px -5px rgba(226, 137, 19, 0.4); }
.login-page .login-btn:active { transform: translateY(0); }
.login-page .login-btn i, .login-page .login-btn span { position: relative; z-index: 1; }

/* Kennwort vergessen Link */
.login-page .kennwort-vergessen-zeile {
    text-align: right;
    margin-top: -0.5rem;
}
.login-page .kennwort-vergessen-link {
    color: #94a3b8;
    font-size: 0.72rem;
    text-decoration: none;
    transition: color 0.2s;
}
.login-page .kennwort-vergessen-link:hover { color: var(--primary-500); }
:root:not(.dark) .login-page .kennwort-vergessen-link { color: var(--gray-400); }
:root:not(.dark) .login-page .kennwort-vergessen-link:hover { color: var(--primary-500); }

/* Zurück-Link */
.login-page .login-zurueck-link {
    color: var(--primary-500);
    font-size: 0.78rem;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.login-page .login-zurueck-link:hover { color: var(--primary-700); }

/* Erfolg-Box */
.login-page .login-erfolg {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #86efac;
    padding: 1.25rem 1rem;
    border-radius: var(--radius);
    text-align: center;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}
.login-page .login-erfolg i { color: #4ade80; }
:root:not(.dark) .login-page .login-erfolg {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}
:root:not(.dark) .login-page .login-erfolg i { color: #22c55e; }

/* Hinweis-Box */
.login-page .login-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    margin-top: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    font-size: 0.7rem;
    color: #94a3b8;
    line-height: 1.5;
}
.login-page .login-hinweis i { color: #64748b; margin-top: 0.15rem; flex-shrink: 0; font-size: 0.75rem; }
:root:not(.dark) .login-page .login-hinweis {
    background: var(--gray-50);
    border-color: var(--gray-200);
    color: var(--gray-500);
}
:root:not(.dark) .login-page .login-hinweis i { color: var(--gray-400); }

/* Bestätigung Icon-Circle */
.login-page .bestaetigung-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(226, 137, 19, 0.15);
    color: var(--primary-500);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.4rem;
}
:root:not(.dark) .login-page .bestaetigung-icon {
    background: var(--primary-50);
}

/* Bestätigung E-Mail-Box */
.login-page .bestaetigung-email {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-500);
    word-break: break-all;
    margin-bottom: 1.25rem;
}
:root:not(.dark) .login-page .bestaetigung-email {
    background: var(--gray-50);
    border-color: var(--gray-200);
}

/* Kennwort Auge-Toggle */
.login-page .form-input-pw { padding-right: 2.5rem; }
.login-page .pw-toggle {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #475569;
    font-size: 0.8rem;
    padding: 0.25rem;
    transition: color 0.2s;
    z-index: 2;
    line-height: 1;
}
.login-page .pw-toggle i {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    color: inherit;
    font-size: inherit;
}
.login-page .pw-toggle:hover { color: var(--primary-500); }
:root:not(.dark) .login-page .pw-toggle { color: var(--gray-400); }
:root:not(.dark) .login-page .pw-toggle:hover { color: var(--primary-500); }

/* Kennwort Match-Anzeige */
.login-page .kennwort-match {
    font-size: 0.7rem;
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1rem;
}
.login-page .kennwort-match.match-ok { color: #4ade80; }
.login-page .kennwort-match.match-fehler { color: #f87171; }
:root:not(.dark) .login-page .kennwort-match.match-ok { color: #16a34a; }
:root:not(.dark) .login-page .kennwort-match.match-fehler { color: #dc2626; }

/* Kennwort-Regeln Checklist */
.login-page .kennwort-regeln {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    font-size: 0.72rem;
}
:root:not(.dark) .login-page .kennwort-regeln {
    background: var(--gray-50);
    border-color: var(--gray-200);
}
.login-page .kennwort-regel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #94a3b8;
    transition: color 0.2s;
}
.login-page .kennwort-regel i { font-size: 0.6rem; }
.login-page .kennwort-regel.erfuellt { color: #4ade80; }
.login-page .kennwort-regel.erfuellt i { color: #4ade80; }
.login-page .kennwort-regel.fehlt { color: #94a3b8; }
:root:not(.dark) .login-page .kennwort-regel { color: var(--gray-400); }
:root:not(.dark) .login-page .kennwort-regel.erfuellt { color: #16a34a; }
:root:not(.dark) .login-page .kennwort-regel.erfuellt i { color: #16a34a; }

@media (max-width: 768px) {
    body.login-page {
        padding: 0.75rem;
        background: var(--gray-50) !important;
        background-image: none !important;
    }
    .login-page .login-card {
        padding: 2rem 1.5rem;
        border-radius: 20px;
        background: white !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid var(--gray-200) !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
        color: var(--gray-800);
    }
    .login-page .form-title { font-size: 1.25rem; color: var(--gray-900) !important; }
    .login-page .form-subtitle { font-size: 0.75rem; color: var(--gray-500) !important; }
    .login-page .form-group label { color: var(--gray-500) !important; }
    .login-page .form-input {
        padding: 0.65rem 0.85rem 0.65rem 2.3rem;
        font-size: 16px;
        background: white !important;
        border-color: var(--gray-200) !important;
        color: var(--gray-800) !important;
    }
    .login-page .form-input::placeholder { color: var(--gray-400) !important; }
    .login-page .input-wrapper i { color: var(--gray-400) !important; }
    .login-page .login-footer-text { color: var(--gray-400) !important; }
    .login-page .login-footer-link { color: var(--primary-500) !important; }
    .login-page .login-divider { background: var(--gray-200) !important; }
    .login-page .login-error { background: var(--error-light) !important; border-color: #fecaca !important; color: #dc2626 !important; }
    .login-page .login-logo .logo-light { display: inline-block !important; }
    .login-page .login-logo .logo-dark { display: none !important; }
    .login-page .login-logo img { height: 60px; filter: none !important; }
}

@media (max-width: 380px) {
    .login-page .login-card { padding: 1.75rem 1.25rem; }
    .login-page .form-title { font-size: 1.1rem; }
    .login-page .login-logo img { height: 50px; }
}


/* ── Profil Page ──────────────────────────────────────────── */
.page-profil .profile-header {
    background: white;
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}
.page-profil .profile-avatar-section { display: flex; flex-direction: column; align-items: center; }
.page-profil .profile-avatar {
    width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.5rem; font-weight: 700;
    box-shadow: 0 4px 12px rgba(226, 137, 19, 0.25); border: 3px solid white;
}
.page-profil .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.page-profil .profile-info { flex: 1; min-width: 0; }
.page-profil .profile-name { font-size: 1.1rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.75rem; }
.page-profil .profile-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.page-profil .profile-stat {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--gray-600); font-size: 0.75rem;
    background: var(--gray-50); padding: 0.3rem 0.6rem;
    border-radius: 6px; border: 1px solid var(--gray-100);
}
.page-profil .profile-stat-icon { font-size: 0.75rem; color: var(--primary-500); line-height: 1; }

/* Teamleiter */
.page-profil .teamleiter-info {
    background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius);
    padding: 0.6rem 0.85rem; margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.6rem; border-left: 3px solid var(--primary-500);
}
.page-profil .teamleiter-avatar {
    width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 0.72rem; font-weight: 700; flex-shrink: 0;
}
.page-profil .teamleiter-avatar img { width: 100%; height: 100%; object-fit: cover; }
.page-profil .teamleiter-details { flex: 1; display: flex; align-items: center; justify-content: space-between; }
.page-profil .teamleiter-name-role { display: flex; align-items: center; gap: 0.4rem; }
.page-profil .teamleiter-name { color: var(--gray-800); font-weight: 600; font-size: 0.78rem; }
.page-profil .teamleiter-role {
    color: var(--primary-600); font-size: 0.65rem; font-weight: 500;
    background: var(--primary-50); padding: 0.1rem 0.4rem; border-radius: 4px; border: 1px solid var(--primary-200);
}
.page-profil .teamleiter-contact { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.page-profil .teamleiter-contact a {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; background: white; color: var(--primary-600);
    text-decoration: none; font-size: 0.65rem; transition: all 0.2s;
    border-radius: 50%; border: 1px solid var(--gray-200);
}
.page-profil .teamleiter-contact a:hover { background: var(--primary-600); color: white; border-color: var(--primary-600); }

/* Read-Only Items */
.page-profil .readonly-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.page-profil .readonly-item { padding: 1rem; background: var(--gray-50); border-radius: var(--radius); border: 1px solid var(--gray-200); }
.page-profil .readonly-label { font-size: 0.75rem; color: var(--gray-500); letter-spacing: 0.5px; margin-bottom: 0.25rem; }
.page-profil .readonly-value { font-weight: 500; color: var(--gray-800); }

/* File Upload */
.page-profil .file-upload-area {
    border: 2px dashed var(--gray-300); border-radius: var(--radius);
    padding: 1.25rem; text-align: center; background: var(--gray-50); transition: all 0.2s;
}
.page-profil .file-upload-area:hover { border-color: var(--primary-400); background: var(--primary-50); }
.page-profil .file-upload-area.dragover { border-color: var(--primary-500); background: var(--primary-100); }
.page-profil .file-upload-input { display: none; }
.page-profil .file-upload-label { display: flex; flex-direction: column; align-items: center; gap: 1rem; cursor: pointer; }
.page-profil .file-upload-icon { font-size: 1.5rem; color: var(--gray-400); }
.page-profil .file-upload-text { color: var(--gray-600); font-size: 0.78rem; }
.page-profil .file-upload-preview { margin-top: 1rem; display: none; }
.page-profil .file-upload-preview img { max-width: 200px; max-height: 200px; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Profil Layout */
.page-profil .form-card {
    background: white; border-radius: var(--radius-xl); padding: 1.25rem;
    box-shadow: var(--shadow); border: 1px solid var(--gray-100); margin-bottom: 1.25rem;
}
.page-profil .form-section-title {
    font-size: 1.1rem; font-weight: 600; color: var(--gray-800);
    margin-bottom: 1rem; padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--gray-200);
    display: flex; align-items: center; gap: 0.5rem;
}
.page-profil .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.page-profil .form-group.full-width { grid-column: span 2; }
.page-profil .form-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 1.25rem; }
.page-profil .profil-actions {
    display: flex; gap: 1rem; justify-content: flex-end; align-items: center;
    margin-top: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--gray-200);
}
.page-profil .profil-actions .btn { padding: 0.6rem 1.25rem; font-size: clamp(0.7rem, 1.5vw, 0.82rem); white-space: nowrap; }
:root.dark .page-profil .profil-actions { border-top-color: #2a2a4a; }
.page-profil .hero { text-align: center; padding: 1.25rem 0 1rem; }
.page-profil .hero h1 { font-size: 1.75rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.75rem; letter-spacing: -0.025em; }
.page-profil .hero p { font-size: 0.9rem; color: var(--gray-600); margin-bottom: 1.25rem; max-width: 800px; margin-left: auto; margin-right: auto; }
.page-profil .alert { padding: 1rem; border-radius: var(--radius); margin-bottom: 1.25rem; display: flex; align-items: flex-start; gap: 0.75rem; font-weight: 500; }
.page-profil .alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.page-profil .alert-error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.page-profil .alert i { margin-top: 0.1rem; flex-shrink: 0; }

:root.dark .page-profil .hero h1 { color: #e5e7eb; }
:root.dark .page-profil .hero p { color: #9ca3af; }
:root.dark .page-profil .form-card { background: #1a1a2e; border-color: #2a2a4a; color: #e5e7eb; }
:root.dark .page-profil .form-section-title { color: #e5e7eb; border-bottom-color: #2a2a4a; }
:root.dark .page-profil .alert { border-color: #2a2a4a; }

@media (max-width: 768px) {
    .page-profil .container { padding: 0 1rem; }
    .page-profil .hero h1 { font-size: 1.5rem; }
    .page-profil .form-grid { grid-template-columns: 1fr; }
    .page-profil .form-group.full-width { grid-column: span 1; }
    .page-profil .form-actions { flex-direction: column; }
}

/* Profil Kennwort-Bereich */
.page-profil .pw-section { position: relative; }
.page-profil .pw-section .input-wrapper { position: relative; }
.page-profil .pw-section .input-wrapper > i.fa-lock {
    position: absolute !important; left: 0.7rem !important; top: 50% !important; transform: translateY(-50%) !important;
    color: var(--gray-400); font-size: 0.75rem;
}
.page-profil .pw-section .form-group input[type="password"],
.page-profil .pw-section .form-group input[type="text"] {
    width: 100% !important; padding: 0.5rem 2.5rem 0.5rem 2.2rem !important;
    border: 2px solid var(--gray-200); border-radius: var(--radius);
    font-size: 0.78rem; background: white; transition: all 0.2s; font-family: inherit;
}
.page-profil .pw-section .form-group input:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-50); }
.page-profil .pw-section .pw-toggle {
    position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--gray-400);
    font-size: 0.8rem; padding: 0.25rem; z-index: 2; line-height: 1;
}
.page-profil .pw-section .pw-toggle i { position: static !important; left: auto !important; top: auto !important; transform: none !important; color: inherit; font-size: inherit; }
.page-profil .pw-section .pw-toggle:hover { color: var(--primary-500); }

/* Kennwort-Regeln + Match im Profil (nicht login-page gescopt) */
.page-profil .kennwort-regeln {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.75rem 1rem; background: var(--gray-50);
    border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 0.72rem;
}
.page-profil .kennwort-regel {
    display: flex; align-items: center; gap: 0.5rem; color: var(--gray-400); transition: color 0.2s;
}
.page-profil .kennwort-regel i { font-size: 0.6rem; }
.page-profil .kennwort-regel.erfuellt { color: #16a34a; }
.page-profil .kennwort-regel.erfuellt i { color: #16a34a; }
.page-profil .kennwort-match {
    font-size: 0.7rem; margin-top: 0.35rem; display: flex; align-items: center; gap: 0.35rem; min-height: 1rem;
}
.page-profil .kennwort-match.match-ok { color: #16a34a; }
.page-profil .kennwort-match.match-fehler { color: #dc2626; }

:root.dark .page-profil .kennwort-regeln { background: #222240; border-color: #3a3a5a; }
:root.dark .page-profil .kennwort-regel { color: #6b7280; }
:root.dark .page-profil .kennwort-regel.erfuellt { color: #4ade80; }
:root.dark .page-profil .kennwort-regel.erfuellt i { color: #4ade80; }
:root.dark .page-profil .kennwort-match.match-ok { color: #4ade80; }
:root.dark .page-profil .kennwort-match.match-fehler { color: #f87171; }

/* Profil Dark Mode */
:root.dark .page-profil .profile-header { background: #1a1a2e; border-color: #2a2a4a; color: #e5e7eb; }
:root.dark .page-profil .profile-name { color: #e5e7eb; }
:root.dark .page-profil .profile-stat { background: #222240; border-color: #2a2a4a; color: #9ca3af; }
:root.dark .page-profil .readonly-item { background: #222240; border-color: #2a2a4a; }
:root.dark .page-profil .readonly-value { color: #e5e7eb; }
:root.dark .page-profil .readonly-label { color: #9ca3af; }
:root.dark .page-profil .pw-section input { background: #222240; border-color: #3a3a5a; color: #e5e7eb; }
:root.dark .page-profil .pw-section input:focus { border-color: var(--primary-500); }
:root.dark .page-profil .pw-section .input-wrapper i.fa-lock { color: #6b7280; }
:root.dark .page-profil .pw-section .pw-toggle { color: #6b7280; }
:root.dark .page-profil .pw-section .pw-toggle:hover { color: var(--primary-500); }
:root.dark .page-profil .file-upload-area { background: #222240; border-color: #3a3a5a; }
:root.dark .page-profil .file-upload-area:hover { border-color: var(--primary-500); background: #2a2a4a; }
:root.dark .page-profil .teamleiter-info { background: var(--gray-50); color: #1e293b; }
:root.dark .page-profil .teamleiter-name { color: #1e293b; }
:root.dark .page-profil [style*="background: white"] { background: #222240 !important; border-color: #2a2a4a !important; color: #e5e7eb !important; }
:root.dark .page-profil [style*="background: var(--gray-50)"] { background: #1a1a2e !important; border-color: #2a2a4a !important; }
:root.dark .page-profil [style*="background: #e0f2fe"] { background: #222240 !important; color: #93c5fd !important; }
:root.dark .page-profil [style*="background: #f8fafc"] { background: #1e1e38 !important; }

@media (max-width: 768px) {
    .page-profil .profile-header { flex-direction: column; text-align: center; padding: 1rem; }
    .page-profil .profile-avatar { width: 80px; height: 80px; font-size: 1.75rem; }
    .page-profil .profile-name { font-size: 1.15rem; }
    .page-profil .readonly-grid { grid-template-columns: 1fr; }
    .page-profil .teamleiter-info { flex-direction: column; text-align: center; gap: 0.75rem; }
    .page-profil .teamleiter-details { flex-direction: column; gap: 0.75rem; }
    .page-profil .teamleiter-contact { justify-content: center; }
}


/* ── Kunden Page ──────────────────────────────────────────── */
.page-kunden .container { max-width: 1400px; }
.page-kunden .customer-card { position: relative; }
.page-kunden .customer-berater {
    font-size: 0.68rem; color: var(--gray-500); display: flex; align-items: center; gap: 0.3rem;
    padding: 0.4rem 0.75rem; border-top: 1px solid var(--gray-100); text-align: right; justify-content: flex-end;
}
.page-kunden .customer-berater i { font-size: 0.6rem; color: var(--primary-500); }
:root.dark .page-kunden .customer-berater { color: var(--dark-text-dim); border-top-color: var(--dark-border); }

/* Toggle Switch (Slider-Variante) */
.toggle-switch-slim {
    position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0;
}
.toggle-switch-slim input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--gray-300); border-radius: 22px; transition: 0.3s;
}
.toggle-slider::before {
    content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px;
    background: white; border-radius: 50%; transition: 0.3s; box-shadow: var(--shadow-sm);
}
input:checked + .toggle-slider { background: var(--success); }
input:checked + .toggle-slider::before { transform: translateX(18px); }
:root.dark .toggle-slider { background: var(--dark-border); }

/* ── Error / Access Denied Page ────────────────────────────── */
.error-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
    text-align: center;
    width: 100%;
    max-width: 420px;
    position: relative;
    overflow: hidden;
}

.error-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--error), var(--primary-500));
}

.error-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--error-light);
    color: var(--error);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.5rem;
}

.error-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.35rem;
}

.error-subtitle {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--error);
    margin-bottom: 1rem;
}

.error-message-text {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 1.25rem;
}

.denied-user-info {
    background: var(--primary-50);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--primary-200);
    font-size: 0.82rem;
    color: var(--primary-700);
}
.denied-user-info i { margin-right: 0.35rem; }

.error-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
}

:root.dark .error-card {
    background: var(--dark-surface);
    border-color: var(--dark-border);
}
:root.dark .error-title { color: var(--dark-text); }
:root.dark .error-subtitle { color: #f87171; }
:root.dark .error-message-text { color: var(--dark-text-muted); }
:root.dark .error-icon { background: rgba(239, 68, 68, 0.12); }
:root.dark .denied-user-info {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--primary-500);
}


/* ── Utility Classes ────────────────────────────────────────── */
.section-title {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    letter-spacing: -0.01em;
}
.section-title i {
    color: var(--primary-600);
    font-size: 0.9rem;
}

.link-primary {
    color: var(--primary-600);
    text-decoration: none;
    font-weight: 550;
}
.link-primary:hover {
    color: var(--primary-700);
    text-decoration: underline;
}

.color-primary { color: var(--primary-600); }
.color-success { color: var(--success); }
.color-warning { color: var(--warning); }
.color-error   { color: var(--error); }
.color-info    { color: var(--info); }
.color-special { color: var(--special); }
.text-muted    { color: var(--gray-500); }

.fw-bold   { font-weight: 700; }
.fw-medium { font-weight: 550; }
.text-sm   { font-size: 0.75rem; }
.text-italic { font-style: italic; }
.icon-sm   { font-size: 0.75rem; margin-right: 0.2rem; }
.ml-sm     { margin-left: 0.5rem; }
.max-w-sm  { max-width: 400px; }

.flex-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1400px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }

    .hero { padding: 1rem 0 0.75rem; }
    .hero h1  { font-size: 1.25rem; }
    .hero p   { font-size: 0.78rem; margin-bottom: 0.75rem; }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .stat-card   { padding: 0.65rem 0.5rem; }
    .stat-icon   { width: 28px; height: 28px; font-size: 0.75rem; margin-bottom: 0.35rem; }
    .stat-value  { font-size: 0.95rem; }
    .stat-label  { font-size: 0.62rem; }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .filter-card { padding: 0.85rem; margin-bottom: 1rem; }

    .filter-section,
    .search-section,
    .search-form {
        flex-direction: column;
        align-items: stretch;
    }

    .search-btn { width: 100%; }

    .btn-group {
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }
    .btn { min-width: 100%; padding: 0.6rem 0.85rem; }

    .date-range-inputs {
        flex-direction: column;
        align-items: stretch;
    }
    .date-range-inputs span { display: none; }

    .view-switch {
        width: 100%;
    }
    .view-btn {
        flex: 1;
        justify-content: center;
    }

    .kw-nav {
        flex-direction: column;
        gap: 0.75rem;
    }

    .techname { padding-left: 0.5rem; }

    .elexx-header-content { padding: 0 1rem; }
    .elexx-header .logo img { height: 50px; }
    .elexx-header .user-name-text,
    .elexx-header .user-greeting { display: none; }
    .elexx-header .user-avatar { width: 32px; height: 32px; }
    .elexx-breadcrumb-content { padding: 0 1rem; font-size: 0.7rem; }
    .elexx-footer { padding: 0.75rem 1rem; font-size: 0.65rem; }
    .elexx-footer .footer-logo { height: 18px; }

    .sort-info {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
        padding: 0.75rem;
    }

    .customer-summary {
        padding: 0.65rem 0.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 0.78rem;
    }
    .customer-info  { width: 100%; gap: 0.4rem; }
    .customer-stats { align-items: flex-start; text-align: left; width: 100%; }

    .customer-header {
        flex-direction: column;
        align-items: stretch;
    }
    .customer-actions { justify-content: flex-end; }
    .customer-content { padding: 0.75rem; }
    .customer-total {
        padding: 0.5rem 0.65rem;
        font-size: 0.72rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .customer-mini-progress {
        width: 100%;
        justify-content: space-between;
    }
    .customer-mini-progress .mini-progress-bar {
        width: 160px !important;
        min-width: 160px;
        height: 4px;
    }

    .order-card  { padding: 0.75rem; }
    .order-info  { font-size: 0.72rem; grid-template-columns: 1fr; gap: 0.35rem; }
    .order-summary { padding: 0.6rem; }
    .order-stats { grid-template-columns: 1fr; gap: 0.5rem; }
    .order-item  { flex-direction: column; align-items: flex-start; gap: 0.4rem; }

    .chart-card  { padding: 0.85rem; }
    .chart-card h3 { font-size: 0.78rem; margin-bottom: 0.75rem; }
    .chart-container { height: 280px; }

    .has-mobile-cards .table-responsive { display: none; }
    .positions-mobile { display: block; }

    .position-card { padding: 0.65rem; }
    .position-card-details { font-size: 0.75rem; gap: 0.4rem; }

    .progress-section { margin: 0.5rem 0; padding: 0.6rem; }

    .form-group label { font-size: 0.68rem; margin-bottom: 0.25rem; }
    .form-group input,
    .form-group select { min-height: 38px; font-size: 14px; padding: 0.5rem 0.6rem; }

    .breakdown-item { font-size: 0.68rem; gap: 0.35rem; }
    .breakdown-item i { width: 10px; font-size: 0.6rem; }
    .stat-breakdown { margin-top: 0.5rem; padding-top: 0.4rem; }
}

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

@media (max-width: 480px) {
    .customer-total { text-align: left; }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    .btn:hover          { transform: none; }
    .stat-card:hover    { transform: none; }
    .stat-card:hover::before { opacity: 0; }
    .customer-card:hover { transform: none; box-shadow: var(--shadow-xs); }
    .customer-summary:hover { background: white; }
    .positions-table tbody tr:hover { background: transparent; }
    .main-table tbody tr:hover { background: transparent; }
}

/* Sticky fallback */
@supports not (position: sticky) {
    .data-table th {
        position: relative;
        z-index: 100;
    }
}


/* ============================================================
   DARK MODE
   ============================================================ */
:root.dark {
    --dark-bg: #0c0f1a;
    --dark-surface: #151929;
    --dark-surface-2: #1c2236;
    --dark-surface-3: #232942;
    --dark-border: #2a3152;
    --dark-border-light: #323b5c;
    --dark-text: #e2e8f0;
    --dark-text-muted: #94a3b8;
    --dark-text-dim: #64748b;
}

:root.dark body {
    background: var(--dark-bg);
    color: var(--dark-text);
}

:root.dark .hero h1,
:root.dark h1, :root.dark h2, :root.dark h3 {
    color: var(--dark-text);
}
:root.dark .hero h1 i {
    -webkit-text-fill-color: unset;
    background: none;
    color: var(--primary-500);
}
:root.dark .hero p,
:root.dark .stat-label {
    color: var(--dark-text-dim);
}

/* Cards & Panels */
:root.dark .card,
:root.dark .stat-card,
:root.dark .table-card,
:root.dark .filter-card,
:root.dark .search-card,
:root.dark .chart-card,
:root.dark .customer-card,
:root.dark .data-table,
:root.dark .details-table,
:root.dark .techniker-dropdown,
:root.dark .order-card,
:root.dark .position-card,
:root.dark .progress-container {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

:root.dark .stat-card::before {
    background: linear-gradient(90deg, var(--primary-600), var(--primary-500));
}

:root.dark .stat-value,
:root.dark .kw-nav strong {
    color: var(--dark-text);
}

/* View switch dark */
:root.dark .view-switch {
    background: var(--dark-surface-2);
}
:root.dark .view-btn.active {
    background: var(--dark-surface-3);
    color: var(--dark-text);
    box-shadow: var(--shadow);
}
:root.dark .view-btn:not(.active) {
    color: var(--dark-text-dim);
}
:root.dark .view-btn:not(.active):hover {
    color: var(--dark-text-muted);
    background: var(--dark-surface-3);
}

/* KW nav dark */
:root.dark .kw-nav a {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-text-muted);
}
:root.dark .kw-nav a:hover {
    background: var(--dark-surface-3);
    border-color: var(--primary-600);
    color: var(--primary-500);
}

/* Table headers */
:root.dark .data-table th,
:root.dark .data-table-sticky th,
:root.dark .main-table th,
:root.dark .details-table th,
:root.dark .positions-table th,
:root.dark .standorte-table th,
:root.dark .table-header {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-text-muted);
}

/* Table cells */
:root.dark .data-table td,
:root.dark .data-table-sticky td,
:root.dark .main-table td,
:root.dark .details-table td,
:root.dark .positions-table td,
:root.dark .standorte-table td,
:root.dark .details-row td {
    border-color: var(--dark-border);
    color: var(--dark-text);
}
:root.dark .data-table,
:root.dark .data-table-sticky,
:root.dark .main-table,
:root.dark .positions-table,
:root.dark .details-table,
:root.dark .standorte-table {
    background: var(--dark-surface);
    border-color: var(--dark-border);
}

/* Table row hover */
:root.dark .main-table tbody tr:hover,
:root.dark .details-table tbody tr:hover,
:root.dark .positions-table tbody tr:hover,
:root.dark .data-table tbody tr:hover,
:root.dark .data-table-sticky tbody tr:hover,
:root.dark .standorte-table tbody tr:hover {
    background: var(--dark-surface-2);
}
:root.dark .positions-table th:hover,
:root.dark .positions-table th.sort-active {
    background: var(--dark-surface-3);
    color: var(--primary-500);
}
:root.dark .positions-table th.sortable::after {
    color: var(--dark-text-dim);
}
:root.dark .positions-table th.sort-asc::after,
:root.dark .positions-table th.sort-desc::after {
    color: var(--primary-500);
}
:root.dark .positions-table input,
:root.dark .positions-table select {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-text);
}
:root.dark .positions-table input:focus,
:root.dark .positions-table select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(226, 137, 19, 0.15);
}
:root.dark .positions-table input[readonly] {
    background: var(--dark-surface-3);
    color: var(--dark-text-dim);
}

/* Revenue cells dark */
:root.dark .revenue-cell.has-revenue {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}
:root.dark .revenue-cell.no-revenue {
    background: var(--dark-surface-2);
    color: var(--dark-text-dim);
    border-color: transparent;
}
:root.dark .revenue-cell.placeholder {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-text-dim);
}

/* Inputs */
:root.dark select,
:root.dark input[type="text"],
:root.dark input[type="date"],
:root.dark input[type="number"],
:root.dark input[type="search"],
:root.dark .techniker-search-input,
:root.dark .date-input,
:root.dark .search-group input {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-text);
}
:root.dark select:hover,
:root.dark input:hover {
    border-color: var(--dark-border-light);
}
:root.dark select:focus,
:root.dark input:focus,
:root.dark .techniker-search-input:focus,
:root.dark .search-group input:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(226, 137, 19, 0.15);
}

:root.dark .form-group label,
:root.dark .search-group label {
    color: var(--dark-text-muted);
}

/* Buttons dark */
:root.dark .btn-secondary {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-text-muted);
}
:root.dark .btn-secondary:hover {
    background: var(--dark-surface-3);
    color: var(--dark-text);
    border-color: var(--dark-border-light);
}
:root.dark .detail-btn {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-text-muted);
}
:root.dark .detail-btn:hover {
    background: rgba(226, 137, 19, 0.1);
    border-color: var(--primary-600);
    color: var(--primary-500);
}
:root.dark .toggle-inactive-btn {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-text-muted);
}
:root.dark .toggle-inactive-btn:hover {
    background: var(--dark-surface-3);
    color: var(--dark-text);
}

/* Stat icons dark */
:root.dark .stat-icon.primary   { color: var(--primary-500); }
:root.dark .stat-icon.success   { color: #4ade80; }
:root.dark .stat-icon.warning   { color: #fbbf24; }
:root.dark .stat-icon.info      { color: #60a5fa; }
:root.dark .stat-icon.special   { color: #a78bfa; }
:root.dark .stat-icon.secondary { color: var(--dark-text-dim); }

/* Customer components */
:root.dark .customer-card:hover {
    border-color: var(--dark-border-light);
    background: var(--dark-surface);
}
:root.dark .customer-summary {
    background: var(--dark-surface);
    border-bottom-color: var(--dark-border);
    color: var(--dark-text);
}
:root.dark .customer-summary:hover { background: var(--dark-surface-2); }
:root.dark .customer-header {
    background: var(--dark-surface);
    border-bottom-color: var(--dark-border);
}
:root.dark .customer-stats,
:root.dark .customer-stats span { color: var(--dark-text-muted); }
:root.dark .customer-total {
    background: rgba(226, 137, 19, 0.08);
    border-left-color: var(--primary-600);
    color: var(--dark-text);
}
:root.dark .customer-total strong { color: var(--dark-text); }
:root.dark .customer-content { color: var(--dark-text); }
:root.dark .customer-number {
    background: var(--dark-surface-3);
    color: var(--dark-text-muted);
}
:root.dark .customer-address { color: var(--dark-text-dim); }
:root.dark .mini-progress-bar { background: var(--dark-surface-3); }

/* Order components */
:root.dark .order-card:hover { border-color: var(--dark-border-light); }
:root.dark .order-summary {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-text);
}
:root.dark .order-header a { color: var(--primary-500); }
:root.dark .order-header a:hover { color: var(--primary-300); }
:root.dark .order-info { color: var(--dark-text-dim); }
:root.dark .order-stats,
:root.dark .order-stats span { color: var(--dark-text); }
:root.dark .order-item {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
}
:root.dark .order-item:hover {
    background: rgba(226, 137, 19, 0.06);
    border-color: rgba(226, 137, 19, 0.2);
}

/* Status badges dark */
:root.dark .status-abgeschlossen {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.25);
    color: #4ade80;
}
:root.dark .status-abarbeitung {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
    color: #60a5fa;
}
:root.dark .status-offen {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

/* Sort info dark */
:root.dark .sort-info {
    background: rgba(226, 137, 19, 0.08);
    border-color: rgba(226, 137, 19, 0.2);
    color: var(--primary-300);
}
:root.dark .clear-sort {
    background: var(--dark-surface-2);
    border-color: rgba(226, 137, 19, 0.2);
    color: var(--primary-300);
}
:root.dark .clear-sort:hover {
    background: rgba(226, 137, 19, 0.12);
}

/* Revenue special badge dark */
:root.dark .revenue-special-list {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

/* Positions table dark */
:root.dark .positions-table {
    background: var(--dark-surface);
    color: var(--dark-text);
}
:root.dark .table-responsive { border-color: var(--dark-border); }
:root.dark .positions-mobile { color: var(--dark-text); }

/* Progress dark */
:root.dark .progress-bar { background: var(--dark-surface-3); }
:root.dark .progress-header { color: var(--dark-text-muted); }
:root.dark .progress-details { color: var(--dark-text-dim); }

/* Team info dark */
:root.dark .team-info {
    background: rgba(226, 137, 19, 0.08);
    border-color: rgba(226, 137, 19, 0.2);
}

/* Dropdown dark */
:root.dark .techniker-dropdown {
    border-color: var(--dark-border);
}
:root.dark .techniker-dropdown-item {
    border-bottom-color: var(--dark-border);
}
:root.dark .techniker-dropdown-item:hover {
    background: var(--dark-surface-2);
}
:root.dark .techniker-dropdown-item.selected {
    background: rgba(226, 137, 19, 0.1);
    color: var(--primary-500);
}

/* Misc dark */
:root.dark .no-results { color: var(--dark-text-dim); }
:root.dark .no-results i { color: var(--dark-text-dim); }
:root.dark .no-results h3, :root.dark .empty-state-title { color: var(--dark-text); }
:root.dark .no-results p, :root.dark .empty-state-desc { color: var(--dark-text-dim); }
:root.dark .empty-state-icon { background: var(--dark-surface-3); color: var(--dark-text-dim); }
:root.dark .negative-value-bg { background: rgba(239, 68, 68, 0.1) !important; }
:root.dark .positions-table td.negative-amount { background-color: rgba(239, 68, 68, 0.06) !important; }

:root.dark .modal-content {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

:root.dark .stat-breakdown {
    border-top-color: var(--dark-border);
}
:root.dark .breakdown-value {
    color: var(--dark-text);
}

:root.dark .details-row td {
    background: var(--dark-surface-2);
}

/* Utility classes dark */
:root.dark .section-title { color: var(--dark-text); }
:root.dark .section-title i { color: var(--primary-500); }
:root.dark .link-primary { color: var(--primary-500); }
:root.dark .link-primary:hover { color: var(--primary-300); }
:root.dark .color-success { color: #4ade80; }
:root.dark .color-warning { color: #fbbf24; }
:root.dark .color-error   { color: #f87171; }
:root.dark .color-info    { color: #60a5fa; }
:root.dark .color-special { color: #a78bfa; }
:root.dark .color-primary { color: var(--primary-500); }
:root.dark .text-muted    { color: var(--dark-text-dim); }
:root.dark .breakdown-item { color: var(--dark-text-muted); }
:root.dark .techniker-name { color: var(--dark-text); }
:root.dark .techname { color: var(--dark-text); }
:root.dark .revenue-total { color: #4ade80; }
:root.dark .revenue-detail { color: var(--dark-text-dim); }
:root.dark .details-table a { color: var(--primary-500); }
:root.dark .details-table a:hover { color: var(--primary-300); }
:root.dark .details-container h4 { color: var(--dark-text-muted); }
:root.dark .order-link { color: var(--primary-500); }
:root.dark .order-link:hover { color: var(--primary-300); }
:root.dark .orders-section h4 { color: var(--dark-text-muted); }
:root.dark .no-orders { color: var(--dark-text-dim); }
:root.dark .card h3 { color: var(--dark-text); }
:root.dark .card h3 i { color: var(--primary-500); }
:root.dark .customer-info h3 { color: var(--dark-text); }

/* Pagination dark */
:root.dark .pagination-wrapper { border-top-color: var(--dark-border); }
:root.dark .pagination-info { color: var(--dark-text-dim); }
:root.dark .pagination-btn {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-text-muted);
}
:root.dark .pagination-btn:hover:not(.disabled):not(.active) {
    background: var(--dark-surface-3);
    border-color: var(--dark-border-light);
    color: var(--primary-500);
}
:root.dark .pagination-btn.active {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: white;
}

/* Sort buttons dark */
:root.dark .sort-btn { color: var(--dark-text-muted); }
:root.dark .sort-btn:hover { color: var(--primary-500); }
:root.dark .sort-btn i.fas.fa-sort-up,
:root.dark .sort-btn i.fas.fa-sort-down { color: var(--primary-500); }

/* Action buttons dark */
:root.dark .action-buttons .btn { border-color: transparent; }

/* Links dark */
:root.dark .auftragsnr-link,
:root.dark .kunde-link { color: var(--primary-500); }
:root.dark .auftragsnr-link:hover,
:root.dark .kunde-link:hover { color: var(--primary-300); }

/* Status icons dark */
:root.dark .status-icon-ok { color: #4ade80; }
:root.dark .status-icon-none { color: var(--dark-text-dim); }

/* Email modal dark */
:root.dark .email-modal-dialog {
    background: var(--dark-surface);
    color: var(--dark-text);
}
:root.dark .email-modal-header {
    background: var(--dark-surface-2);
    border-bottom-color: var(--dark-border);
}
:root.dark .email-modal-title { color: var(--dark-text); }
:root.dark .email-modal-subtitle { color: var(--dark-text-dim); }
:root.dark .email-modal-close { color: var(--dark-text-dim); }
:root.dark .email-modal-close:hover {
    background: var(--dark-surface-3);
    color: var(--dark-text);
}
:root.dark .email-pdf-info-section {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
}
:root.dark .email-pdf-info-header { color: var(--dark-text-muted); }
:root.dark .email-pdf-filename { color: var(--dark-text-dim); }
:root.dark .email-form-label { color: var(--dark-text-muted); }
:root.dark .email-form-input,
:root.dark .email-form-textarea {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-text);
}
:root.dark .email-form-input:focus,
:root.dark .email-form-textarea:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}
:root.dark .email-help-text { color: var(--dark-text-dim); }
:root.dark .email-info-box {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.25);
}
:root.dark .email-info-icon { color: #60a5fa; }
:root.dark .email-info-text { color: #93c5fd; }
:root.dark .email-loading-state { background: var(--dark-surface-2); }
:root.dark .email-loading-text { color: var(--dark-text-dim); }
:root.dark .email-message-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.25);
    color: #4ade80;
}
:root.dark .email-message-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

/* Header dark */
:root.dark .elexx-header {
    background: rgba(15, 19, 32, 0.95);
    border-bottom-color: var(--dark-border);
}
:root.dark .elexx-header .user-info:hover { background: var(--dark-surface-2); }
:root.dark .elexx-header .user-greeting { color: var(--dark-text-dim); }
:root.dark .elexx-header .user-name-text { color: var(--dark-text); }
:root.dark .elexx-header .user-dropdown {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
:root.dark .elexx-header .dropdown-header { border-bottom-color: var(--dark-border); }
:root.dark .elexx-header .dropdown-name { color: var(--dark-text); }
:root.dark .elexx-header .dropdown-item { color: var(--dark-text-muted); }
:root.dark .elexx-header .dropdown-item:hover {
    background: var(--dark-surface-2);
    color: var(--dark-text);
}
:root.dark .elexx-header .dropdown-item.logout:hover {
    background: rgba(239, 68, 68, 0.1);
}
:root.dark .darkmode-toggle { color: var(--dark-text-muted); }
:root.dark .darkmode-toggle:hover { background: var(--dark-surface-2); }

/* Breadcrumb dark */
:root.dark .elexx-breadcrumb-bar {
    background: var(--dark-bg);
    border-bottom-color: var(--dark-border);
}
:root.dark .elexx-breadcrumb-content a { color: var(--primary-500); }
:root.dark .elexx-breadcrumb-content a:hover { color: var(--primary-300); }
:root.dark .elexx-breadcrumb-content .bc-current { color: var(--dark-text); }
:root.dark .elexx-breadcrumb-content .bc-sep { color: var(--dark-text-dim); }

/* Ticker dark */
:root.dark .elexx-ticker-bar {
    background: var(--dark-bg);
    color: var(--dark-text-muted);
    border-bottom-color: var(--dark-border);
}

/* Footer dark */
:root.dark .elexx-footer {
    background: var(--dark-bg);
    border-top-color: var(--dark-border);
    color: var(--dark-text-dim);
}
:root.dark .elexx-footer a { color: var(--primary-500); }

/* Search dark */
:root.dark .search-input {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-text);
}
:root.dark .search-input:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(226, 137, 19, 0.15);
}
:root.dark .search-icon { color: var(--dark-text-dim); }
:root.dark .search-results-container {
    background: var(--dark-surface);
    border-color: var(--dark-border);
}
:root.dark .search-result-item { border-bottom-color: var(--dark-border); }
:root.dark .search-result-item:hover { background: var(--dark-surface-2); }
:root.dark .search-result-title { color: var(--dark-text); }
:root.dark .search-result-subtitle { color: var(--dark-text-dim); }

/* Section dark */
:root.dark .section-subtitle { color: var(--dark-text-dim); }

/* Messages dark */
:root.dark .message {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
    border-left-color: var(--success);
}
:root.dark .message i { color: #4ade80; }
:root.dark .message.error { border-left-color: var(--error); }
:root.dark .message.error i { color: #f87171; }
:root.dark .message.warning { border-left-color: var(--warning); }
:root.dark .message.warning i { color: #fbbf24; }
:root.dark .message.info { border-left-color: var(--info); }
:root.dark .message.info i { color: #60a5fa; }

/* Dash Cards dark */
:root.dark .dash-card {
    background: var(--dark-surface);
    border-color: var(--dark-border);
}
:root.dark .dash-card:hover {
    border-color: var(--dark-border-light);
}
:root.dark .dash-card-title { color: var(--dark-text); }
:root.dark .dash-card-desc { color: var(--dark-text-dim); }
:root.dark .dash-card-badge {
    background: var(--dark-surface-3);
    color: var(--dark-text-muted);
}
:root.dark .dash-card-icon.primary { background: rgba(226, 137, 19, 0.12); }
:root.dark .dash-card-icon.success { background: rgba(34, 197, 94, 0.12); }
:root.dark .dash-card-icon.warning { background: rgba(245, 158, 11, 0.12); }
:root.dark .dash-card-icon.info    { background: rgba(59, 130, 246, 0.12); }
:root.dark .dash-card-icon.special { background: rgba(139, 92, 246, 0.12); }

/* Modal dark */
:root.dark .modal {
    background: var(--dark-surface);
    color: var(--dark-text);
}
:root.dark .modal h4 { color: var(--dark-text); }
:root.dark .modal label { color: var(--dark-text-muted); }
:root.dark .modal input,
:root.dark .modal textarea,
:root.dark .modal select {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-text);
}
:root.dark .modal input:focus,
:root.dark .modal textarea:focus,
:root.dark .modal select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(226, 137, 19, 0.15);
}
:root.dark .modal .cancel {
    background: var(--dark-surface-2);
    color: var(--dark-text-muted);
    border-color: var(--dark-border);
}
:root.dark .modal .cancel:hover { background: var(--dark-surface-3); }

/* Side panel dark */
:root.dark .side-panel {
    background: var(--dark-surface);
    border-color: var(--dark-border);
}
:root.dark .side-panel-header {
    background: var(--dark-surface-2);
    border-bottom-color: var(--dark-border);
}
:root.dark .side-panel-title { color: var(--dark-text); }
:root.dark .side-panel-close { color: var(--dark-text-dim); }
:root.dark .side-panel-close:hover {
    background: var(--dark-surface-3);
    color: var(--dark-text);
}

/* Toggle dark */
:root.dark .side-toggle {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-text-muted);
}
:root.dark .side-toggle:hover {
    background: var(--dark-surface-3);
    color: var(--dark-text);
}
:root.dark .side-toggle.active {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: white;
}

/* Ghost button dark */
:root.dark .btn-ghost {
    color: var(--primary-500);
    border-color: rgba(226, 137, 19, 0.25);
}
:root.dark .btn-ghost:hover {
    background: rgba(226, 137, 19, 0.08);
    border-color: rgba(226, 137, 19, 0.4);
}
:root.dark .btn-status {
    background: var(--dark-surface-2);
    color: var(--dark-text-muted);
    border-color: var(--dark-border);
}

/* File upload dark */
:root.dark .file-list {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
}
:root.dark .file-list-item {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}
:root.dark .file-list-item-size { color: var(--dark-text-dim); }
:root.dark .file-list-item-remove { color: var(--dark-text-dim); }
:root.dark .file-list-item-remove:hover {
    color: #f87171;
    background: rgba(239, 68, 68, 0.12);
}

/* Tooltip dark */
:root.dark .tooltip .tooltip-text {
    background: var(--dark-surface-3);
    box-shadow: var(--shadow-xl);
}
:root.dark .tooltip .tooltip-text::after {
    border-color: var(--dark-surface-3) transparent transparent transparent;
}

/* Tab system dark */
:root.dark .tab-badge { background: #dc2626; }
:root.dark .nav-tab.active .tab-badge { background: #b91c1c; }

/* Collapsible sections dark */
:root.dark .collapsible-section { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .collapsible-section.collapsed { background: var(--dark-surface); }
:root.dark .collapsible-header { background: var(--dark-surface-2); border-bottom-color: var(--dark-border); }
:root.dark .collapsible-section.collapsed .collapsible-header { background: var(--dark-surface); }
:root.dark .collapse-indicator { background: var(--dark-surface-3); color: var(--dark-text-muted); }

/* PDF modal dark */
:root.dark .pdf-modal-dialog { background: var(--dark-surface); }
:root.dark .pdf-modal-header { border-color: var(--dark-border); }
:root.dark .pdf-modal-header .modal-title { color: var(--dark-text); }
:root.dark .pdf-modal-header .modal-close { color: var(--dark-text-dim); }
:root.dark .pdf-loading { background: var(--dark-surface); color: var(--dark-text-muted); }

/* Email suggestions dark */
:root.dark .email-suggestion { background: var(--dark-surface-2); border-color: var(--dark-border); }
:root.dark .email-suggestion strong { color: var(--dark-text); }
:root.dark .email-suggestion span { color: var(--primary-500); }
:root.dark .email-suggestion:hover { background: var(--dark-surface-3); border-color: var(--dark-border-light); }

/* File dropzone dark */
:root.dark .file-dropzone { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .file-dropzone:hover, :root.dark .file-dropzone.dragover { background: var(--dark-surface-2); border-color: var(--primary-600); }
:root.dark .file-dropzone h5 { color: var(--dark-text); }

/* Folder accordion dark */
:root.dark .folder-item { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .folder-item:hover { border-color: var(--dark-border-light); box-shadow: none; }
:root.dark .folder-item.is-open { border-color: rgba(226, 137, 19, 0.3); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
:root.dark .folder-header { background: var(--dark-surface); }
:root.dark .folder-item.is-open > .folder-header { background: var(--dark-surface-2); border-bottom-color: var(--dark-border); }
:root.dark .toggle-icon { background: var(--dark-surface-3); color: var(--dark-text-dim); }
:root.dark .folder-item.is-open .toggle-icon { background: rgba(226, 137, 19, 0.15); color: var(--primary-500); }
:root.dark .folder-name { color: var(--dark-text); }
:root.dark .file-count { color: var(--dark-text-dim); background: var(--dark-surface-3); }
:root.dark .folder-content { background: var(--dark-bg); }
:root.dark .folder-content::before { background: var(--dark-border); }
:root.dark .file-item::before { background: var(--dark-border); }

/* File items dark */
:root.dark .file-item { background: var(--dark-surface-2); border-color: var(--dark-border); }
:root.dark .file-item:hover { border-color: var(--dark-border-light); }
:root.dark .file-name { color: var(--dark-text); }
:root.dark .file-date { color: var(--dark-text-dim); }
:root.dark .next-pruef { color: #60a5fa; }

/* Upload progress dark */
:root.dark .upload-progress { background: var(--dark-surface-3); }

/* Notiz items dark */
:root.dark .notiz-item { border-bottom-color: var(--dark-border); }
:root.dark .notiz-text { color: var(--dark-text); }
:root.dark .notiz-item-erledigt .notiz-text { color: var(--dark-text-dim); }
:root.dark .notiz-meta { color: var(--dark-text-dim); }

/* Compact table dark */
:root.dark .compact-table { background: var(--dark-surface); }

/* Form select dark */
:root.dark .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

/* Metric cards dark */
:root.dark .metric-card {
    background: var(--dark-surface);
    border-color: var(--dark-border);
}
:root.dark .metric-card:hover { border-color: var(--dark-border-light); }
:root.dark .metric-card-title { color: var(--dark-text-dim); }
:root.dark .metric-card-value { color: var(--dark-text); }
:root.dark .metric-card-subtitle { color: var(--dark-text-dim); }
:root.dark .metric-card-trend.positive { background: rgba(34, 197, 94, 0.12); color: #4ade80; }
:root.dark .metric-card-trend.negative { background: rgba(239, 68, 68, 0.12); color: #f87171; }
:root.dark .metric-card-trend.neutral  { background: var(--dark-surface-3); color: var(--dark-text-muted); }

/* List cards dark */
:root.dark .list-card {
    background: var(--dark-surface);
    border-color: var(--dark-border);
}
:root.dark .list-card-title { color: var(--dark-text); }
:root.dark .list-item { border-bottom-color: var(--dark-border); }
:root.dark .list-item:hover { background: var(--dark-surface-2); }
:root.dark .list-item-title { color: var(--dark-text); }
:root.dark .list-item-title a { color: var(--primary-500); }
:root.dark .list-item-subtitle { color: var(--dark-text-dim); }
:root.dark .list-item-value { color: var(--dark-text); }

/* Leaderboard dark */
:root.dark .leaderboard-item { background: var(--dark-surface-2); }
:root.dark .leaderboard-item:hover { background: var(--dark-surface-3); }
:root.dark .leaderboard-name { color: var(--dark-text); }
:root.dark .leaderboard-details { color: var(--dark-text-dim); }
:root.dark .leaderboard-average { color: var(--dark-text-dim); }

/* Section icons dark */
:root.dark .section-icon.revenue   { background: rgba(34, 197, 94, 0.12); }
:root.dark .section-icon.employees { background: rgba(59, 130, 246, 0.12); }
:root.dark .section-icon.orders    { background: rgba(245, 158, 11, 0.12); }
:root.dark .section-icon.invoices  { background: rgba(239, 68, 68, 0.12); }

/* Berater dark */
:root.dark .berater-info {
    background: rgba(226, 137, 19, 0.08);
    border-color: rgba(226, 137, 19, 0.2);
    color: var(--dark-text);
}

/* Inline background overrides (global, very useful) */
:root.dark [style*="background: white"],
:root.dark [style*="background: var(--gray-50)"] {
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}
:root.dark [style*="background: #dcfce7"] { background: rgba(34, 197, 94, 0.12) !important; color: #4ade80 !important; }
:root.dark [style*="background: #dbeafe"] { background: rgba(59, 130, 246, 0.12) !important; color: #60a5fa !important; }
:root.dark [style*="background: #fef3c7"] { background: rgba(245, 158, 11, 0.12) !important; color: #fbbf24 !important; }
:root.dark [style*="background: #fee2e2"] { background: rgba(239, 68, 68, 0.12) !important; color: #f87171 !important; }
:root.dark [style*="background: #ede9fe"] { background: rgba(139, 92, 246, 0.12) !important; color: #a78bfa !important; }
:root.dark [style*="background: #fce7f3"] { background: rgba(236, 72, 153, 0.12) !important; color: #f472b6 !important; }
:root.dark [style*="background: #f8fafc"] { background: var(--dark-surface-2) !important; }
:root.dark [style*="background: #f0f9ff"] { background: var(--dark-surface-2) !important; }
:root.dark [style*="color: var(--gray-600)"] { color: var(--dark-text-muted) !important; }
:root.dark [style*="color: var(--gray-700)"] { color: var(--dark-text-muted) !important; }
:root.dark [style*="color: var(--gray-800)"] { color: var(--dark-text) !important; }
:root.dark [style*="color: var(--gray-900)"] { color: var(--dark-text) !important; }


/* ── Rechnungskontrolle ───────────────────────────────────── */

/* Action Bar */
.action-bar { max-width: 1700px; margin: 0 auto; padding: 0.5rem 2.5rem; display: flex; gap: 0.75rem; align-items: center; justify-content: flex-end; }
.action-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; font-size: 0.72rem; font-weight: 500; text-decoration: none; border-radius: var(--radius-sm); transition: all var(--transition-fast); position: relative; background: var(--primary-50); color: var(--primary-700); border: 1px solid var(--primary-200); }
.action-btn:hover { background: var(--primary-100); color: var(--primary-800); }
.action-btn .badge-count { background: var(--error); color: white; font-size: 0.6rem; padding: 0.15rem 0.35rem; border-radius: var(--radius-full); position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font-weight: 600; }

/* Dashboard Grouped Boxes */
.rk-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.dash-box-grouped { background: white; border-radius: var(--radius-lg); padding: 1rem; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); transition: all var(--transition); }
.dash-box-grouped:hover { box-shadow: var(--shadow); border-color: var(--primary-200); }
.dash-box-grouped .dash-icon { width: 32px; height: 32px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.6rem; font-size: 1rem; }
.dash-box-grouped .dash-icon.primary { color: var(--primary-600); }
.dash-box-grouped .dash-icon.success { color: var(--success); }
.dash-box-grouped .dash-icon.warning { color: var(--warning); }
.dash-box-grouped h3 { font-size: 0.82rem; color: var(--gray-700); margin-bottom: 0.6rem; font-weight: 600; text-align: center; }
.dash-metric { margin-bottom: 0.6rem; text-align: center; }
.dash-metric:last-child { margin-bottom: 0; }
.dash-metric-label { font-size: 0.72rem; color: var(--gray-500); margin-bottom: 0.25rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
.dash-metric-sublabel { font-size: 0.65rem; color: var(--gray-400); font-weight: 400; font-style: italic; }
.dash-metric-value { font-size: 1.05rem; font-weight: 700; color: var(--gray-900); line-height: 1.2; }
.dash-metric-value.current-week { font-size: 0.95rem; color: var(--primary-600); }
.dash-divider { height: 1px; background: var(--gray-200); margin: 0.6rem 0; }

/* Upload Action Card */
.upload-action-card { background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%); border: 1px solid var(--primary-200); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.25rem; text-align: center; box-shadow: var(--shadow-sm); }
.upload-action-card:hover { box-shadow: var(--shadow); border-color: var(--primary-300); }
.upload-action-card h3 { color: var(--primary-800); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.upload-action-card p { color: var(--primary-700); margin-bottom: 1rem; font-size: 0.78rem; }
.upload-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* Invoice Form */
.invoice-form { background: var(--gray-50); padding: 1rem; border-radius: var(--radius); border: 1px solid var(--gray-200); }
.invoice-form-header { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }

/* Filter Form */
.filter-form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 1rem; }
.form-group { display: flex; flex-direction: column; }
.form-group label { font-weight: 600; margin-bottom: 0.3rem; color: var(--gray-600); font-size: 0.72rem; display: flex; align-items: center; gap: 0.4rem; }
.form-group input, .form-group select, .form-group textarea { padding: 0.4rem 0.55rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 0.78rem; background: white; transition: all var(--transition); font-family: inherit; color: var(--gray-800); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-500); box-shadow: var(--shadow-glow); }

/* Invoice Row Expand */
.invoice-row.expandable { cursor: pointer; }
.expand-btn { transition: transform var(--transition-fast); padding: 0.25rem; display: inline-flex; align-items: center; justify-content: center; }
.expand-btn:hover { color: var(--primary-700); }
.invoice-row.expanded .expand-btn i { transform: rotate(90deg); }
.invoice-details-row { background: var(--gray-50); }
.invoice-details-row td { border-top: 2px solid var(--gray-200); }

/* Upload Area (Drag & Drop) */
.upload-area { border: 2px dashed var(--gray-300); border-radius: var(--radius); padding: 1.5rem; text-align: center; transition: all var(--transition-fast); cursor: pointer; background: var(--gray-50); }
.upload-area:hover { border-color: var(--primary-500); background: var(--primary-50); }
.upload-area.dragover { border-color: var(--primary-500); background: var(--primary-50); }
.upload-icon { font-size: 1.75rem; color: var(--gray-400); margin-bottom: 0.5rem; }
.upload-area p { font-size: 0.78rem; color: var(--gray-500); margin: 0; }
.upload-hint { font-size: 0.68rem !important; color: var(--gray-400) !important; margin-top: 0.25rem !important; }
.upload-filename { font-size: 0.75rem !important; color: var(--primary-700) !important; font-weight: 600; margin-top: 0.5rem !important; }
.upload-filename:empty { display: none; }
.upload-actions-bar { display: flex; gap: 0.5rem; margin-top: 0.75rem; align-items: center; }

/* Card Header with Search */
.card-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }
.card-header-flex h3 { margin-bottom: 0; }
.card-header-search { display: flex; gap: 0.35rem; align-items: center; flex-wrap: nowrap; }
.form-input-sm { font-family: inherit; font-size: 0.72rem; padding: 0.35rem 0.5rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); background: white; color: var(--gray-800); transition: all var(--transition-fast); }
.form-input-sm:focus { outline: none; border-color: var(--primary-500); box-shadow: var(--shadow-glow); }
input[type="date"].form-input-sm { width: 125px; flex-shrink: 0; }
.date-sep { font-size: 0.72rem; color: var(--gray-400); flex-shrink: 0; }
.kw-label { font-size: 0.62rem; color: var(--gray-500); min-width: 26px; flex-shrink: 0; }

/* Invoice Details (expanded row) */
.invoice-details-cell { background: var(--gray-50); padding: 0.75rem 1rem; }
.invoice-details-title { margin-bottom: 0.5rem; color: var(--gray-800); font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; gap: 0.35rem; }
.invoice-details-title i { color: var(--primary-600); font-size: 0.65rem; }
.expand-btn { background: none; border: none; cursor: pointer; color: var(--primary-600); padding: 0.25rem; margin-right: 0.35rem; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--transition-fast); }

/* Filter Row in Tables */
.filter-row th { cursor: default !important; background: var(--gray-100) !important; }
.filter-row th:hover { background: var(--gray-100) !important; }
.filter-row input { width: 100%; padding: 0.35rem; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 0.72rem; font-family: inherit; }

/* Utility */
.hidden { display: none !important; }
.sub-text { font-size: 0.68rem; color: var(--gray-500); margin-top: 1px; }
.kw-input { width: 55px; text-align: center; font-size: 0.78rem; padding: 0.25rem; border: 1px solid var(--gray-300); border-radius: var(--radius-xs); font-family: inherit; }
.filter-label { font-size: 0.68rem; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.03em; }
.rk-filter-row { margin-bottom: 0.75rem; padding: 0.6rem 0.85rem; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); }
.edit-textarea { width: 100%; resize: vertical; font-family: inherit; font-size: 0.72rem; padding: 0.3rem; border: 1px solid var(--gray-300); border-radius: var(--radius-xs); }

/* Inline Edit Cells */
.inline-edit-cell { position: relative; max-width: 200px; word-wrap: break-word; }
.inline-display { display: block; line-height: 1.3; max-height: 2.6em; overflow: hidden; font-size: 0.72rem; cursor: pointer; padding: 0.1rem 0; border-bottom: 1px dashed var(--gray-300); transition: all var(--transition-fast); }
.inline-display:hover { border-bottom-color: var(--primary-300); }
.inline-display.text-muted { font-style: italic; }
.inline-form { margin-top: 0.15rem; }
.inline-form form { display: flex; flex-direction: column; gap: 0.2rem; }
.inline-form form:has(.kw-input) { flex-direction: row; align-items: center; gap: 0.2rem; }
.inline-actions { display: flex; gap: 0.2rem; }
.main-table a:not(.btn) { text-decoration: none; color: inherit; }
.main-table a:not(.btn):hover { text-decoration: none; color: var(--primary-600); }
:root.dark .inline-display { border-bottom-color: var(--dark-border); }
:root.dark .inline-display:hover { border-bottom-color: rgba(226,137,19,0.4); }
:root.dark .edit-textarea { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }

:root.dark .sub-text { color: var(--dark-text-dim); }
:root.dark .kw-input { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
:root.dark .filter-label { color: var(--dark-text-dim); }
:root.dark .rk-filter-row { background: var(--dark-surface-2); border-color: var(--dark-border); }

/* Diff Colors */
.diff-pos { color: var(--success); font-weight: 600; }
.diff-neg { color: var(--error); font-weight: 600; }
.diff-zero { color: var(--gray-600); font-weight: 700; }
.storno-neg { color: var(--error); font-weight: bold; }

/* Diff-Wertung Toggle */
.diff-wertung-wrap { display: inline-flex; align-items: center; gap: 6px; }
.diff-wertung-wrap.nicht-gewertet .diff-wert { text-decoration: line-through; opacity: 0.5; }
.diff-toggle-icon { cursor: pointer; font-size: 0.75rem; opacity: 0.4; transition: opacity 0.2s; }
.diff-toggle-icon:hover { opacity: 1; }
.diff-wertung-wrap.nicht-gewertet .diff-toggle-icon { opacity: 0.7; color: var(--warning, #f59e0b); }
td.nicht-gewertet-eur { text-decoration: line-through; opacity: 0.5; }
.diff-original-hint { font-size: 0.65rem; font-weight: 400; opacity: 0.5; margin-top: 1px; text-decoration: none !important; font-style: italic; }
.diff-np-cell { width: 30px; padding: 0 4px !important; }
.diff-np { font-weight: 700; font-size: 0.75rem; }
.diff-np-n { color: var(--error); }
.diff-np-p { color: var(--success); }
.betrag-higher { color: var(--success); font-weight: 600; }
.betrag-lower { color: var(--error); font-weight: 600; }
.betrag-equal { color: var(--gray-800); font-weight: 600; }

/* Info Box */
.info-box { background: var(--primary-50); padding: 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid rgba(226, 137, 19, 0.2); display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.info-box-item { display: flex; flex-direction: column; gap: 0.2rem; }
.info-box-item strong { color: var(--gray-600); font-size: 0.72rem; font-weight: 500; }
.info-box-item .value { font-size: 0.88rem; color: var(--gray-900); font-weight: 600; }
.info-box-item .sub-value { font-size: 0.72rem; color: var(--gray-600); }

/* Sortable Headers (emoji-based) */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: var(--gray-100); }

/* Delete Button */
.delete-btn { background: none; border: none; color: var(--error); cursor: pointer; padding: 0.35rem; border-radius: var(--radius-sm); transition: all var(--transition-fast); font-size: 0.72rem; }
.delete-btn:hover { background: var(--error-light); }
.action-col { text-align: center; white-space: nowrap; }

/* Bemerkung Editable Cells */
.bemerkung-cell { max-width: 200px; word-wrap: break-word; position: relative; }
.bemerkung-display { display: block; line-height: 1.3; max-height: 2.8em; overflow: hidden; font-size: 0.72rem; }
.bemerkung-edit textarea { resize: vertical; min-height: 2em; font-family: inherit; font-size: 0.72rem; border: 1px solid var(--gray-300); border-radius: var(--radius-xs); padding: 0.3rem; }
.bemerkung-edit-btn { opacity: 0.7; transition: opacity var(--transition-fast); background: none; border: none; color: var(--primary-600); cursor: pointer; font-size: 0.65rem; margin-left: 0.3rem; }
.bemerkung-cell:hover .bemerkung-edit-btn { opacity: 1; }
.bemerkung-edit-btn:hover { color: var(--primary-700); }
.bemerkung-edit { margin-top: 0.5rem; }
.bemerkung-edit form { display: block; }

/* Auftrag-Bemerkung Cells */
.auftrag-bemerkung-cell { max-width: 180px; word-wrap: break-word; position: relative; }
.auftrag-bemerkung-display { display: block; line-height: 1.3; max-height: 2.8em; overflow: hidden; font-size: 0.72rem; }
.auftrag-bemerkung-edit textarea { resize: vertical; min-height: 2em; font-family: inherit; font-size: 0.72rem; border: 1px solid var(--gray-300); border-radius: var(--radius-xs); padding: 0.3rem; }
.auftrag-bemerkung-edit-btn { opacity: 0.7; transition: opacity var(--transition-fast); background: none; border: none; color: var(--primary-600); cursor: pointer; font-size: 0.65rem; margin-left: 0.3rem; }
.auftrag-bemerkung-cell:hover .auftrag-bemerkung-edit-btn { opacity: 1; }
.auftrag-bemerkung-edit-btn:hover { color: var(--primary-700); }
.auftrag-bemerkung-edit { margin-top: 0.5rem; }
.auftrag-bemerkung-edit form { display: block; }

/* KW Editable Cells */
.kw-cell { position: relative; display: inline-flex; align-items: center; }
.kw-display { display: inline-block; }
.kw-edit-btn { opacity: 0.7; transition: opacity var(--transition-fast); background: none; border: none; color: var(--primary-600); cursor: pointer; font-size: 0.65rem; margin-left: 0.3rem; }
.kw-cell:hover .kw-edit-btn { opacity: 1; }
.kw-edit-btn:hover { color: var(--primary-700); }
.kw-edit { display: inline-flex; align-items: center; }
.kw-edit input[type="number"] { border: 1px solid var(--gray-300); border-radius: var(--radius-xs); padding: 0.25rem; font-size: 0.78rem; }

/* Pagination */
.pagination { display: flex; justify-content: center; align-items: center; gap: 0.4rem; margin-top: 1rem; flex-wrap: wrap; }
.pagination-info { color: var(--gray-600); font-size: 0.72rem; margin-right: 0.75rem; }
.pagination-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 0.4rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); background: white; color: var(--gray-700); text-decoration: none; font-weight: 500; font-size: 0.72rem; transition: all var(--transition-fast); }
.pagination-btn:hover { border-color: var(--primary-500); color: var(--primary-600); }
.pagination-btn.active { background: var(--primary-600); border-color: var(--primary-600); color: white; }
.pagination-btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.pagination-ellipsis { color: var(--gray-400); padding: 0 0.4rem; font-size: 0.72rem; }

/* Success Messages */
.success-msg { padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; background: var(--success-light); color: #065f46; }
.success-msg i { font-size: 1rem; color: var(--success); }
.success-msg.bemerkung-updated { background: var(--info-light); color: #1e40af; }
.success-msg.bemerkung-updated i { color: var(--info); }
.success-msg.auftrag-updated { background: #f0f9ff; color: #0c4a6e; }
.success-msg.auftrag-updated i { color: #0284c7; }

/* Statistik Box */
.statistik-box { margin-top: 1rem; padding: 1rem; background: var(--gray-50); border-radius: var(--radius); border: 1px solid var(--gray-200); }
.statistik-box h3 { margin-bottom: 0.75rem; color: var(--gray-800); font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; }
.statistik-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }
.statistik-item { background: white; padding: 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--gray-200); }
.statistik-item-label { font-size: 0.75rem; color: var(--gray-600); margin-bottom: 0.35rem; }
.statistik-item-value { font-size: 1.1rem; font-weight: 600; color: var(--gray-900); }
.statistik-subtitle { margin-bottom: 0.5rem; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); }

/* Rechnungskontrolle Dark Mode */
:root.dark .action-btn { background: var(--dark-surface-2); color: #e67e22; border-color: var(--dark-border); }
:root.dark .action-btn:hover { background: var(--dark-surface-3); }
:root.dark .dash-box-grouped { background: var(--dark-surface); border-color: var(--dark-border); color: var(--dark-text); }
:root.dark .dash-box-grouped:hover { border-color: var(--dark-border); background: var(--dark-surface-2); }
:root.dark .dash-box-grouped h3 { color: var(--dark-text); }
:root.dark .dash-box-grouped .dash-icon.primary { background: var(--dark-surface-2); }
:root.dark .dash-box-grouped .dash-icon.success { background: rgba(34, 197, 94, 0.15); }
:root.dark .dash-box-grouped .dash-icon.warning { background: rgba(245, 158, 11, 0.15); }
:root.dark .dash-divider { background: var(--dark-border); }
:root.dark .dash-metric-value { color: var(--dark-text); }
:root.dark .invoice-form { background: var(--dark-surface-2); border-color: var(--dark-border); }
:root.dark .form-group label { color: var(--dark-text-muted); }
:root.dark .form-group input, :root.dark .form-group select, :root.dark .form-group textarea { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
:root.dark .form-group input:focus, :root.dark .form-group select:focus, :root.dark .form-group textarea:focus { background: var(--dark-surface-3); border-color: #e67e22; }
:root.dark .filter-row th { background: var(--dark-surface-2) !important; }
:root.dark .filter-row input { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
:root.dark .success-msg { background: rgba(34, 197, 94, 0.15); color: #34d399; }
:root.dark .success-msg i { color: #34d399; }
:root.dark .upload-area { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .upload-area:hover, :root.dark .upload-area.dragover { border-color: #e67e22; background: var(--dark-surface-2); }
:root.dark .upload-icon { color: var(--dark-text-dim); }
:root.dark .upload-area p { color: var(--dark-text-dim); }
:root.dark .upload-action-card { background: linear-gradient(135deg, var(--dark-surface) 0%, var(--dark-surface-2) 100%); border-color: var(--dark-border); }
:root.dark .upload-action-card:hover { border-color: #e67e22; }
:root.dark .upload-action-card h3 { color: var(--dark-text); }
:root.dark .upload-action-card p { color: var(--dark-text-dim); }
:root.dark .info-box { background: var(--dark-surface-2); border-color: var(--dark-border); }
:root.dark .info-box-item strong { color: var(--dark-text-muted); }
:root.dark .info-box-item .value { color: var(--dark-text); }
:root.dark .info-box-item .sub-value { color: var(--dark-text-dim); }
:root.dark .statistik-box { background: var(--dark-surface) !important; border-color: var(--dark-border) !important; }
:root.dark .statistik-item { background: var(--dark-surface-2) !important; border-color: var(--dark-border) !important; color: var(--dark-text); }
:root.dark .pagination-btn { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
:root.dark .pagination-btn:hover { background: var(--dark-surface-3); }
:root.dark .pagination-btn.active { background: var(--primary-600); border-color: var(--primary-600); color: white; }
:root.dark .betrag-equal { color: var(--dark-text); }
:root.dark .form-input-sm { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
:root.dark .form-input-sm:focus { border-color: #e67e22; }
:root.dark .date-sep { color: var(--dark-text-dim); }
:root.dark .kw-label { color: var(--dark-text-dim); }
:root.dark .invoice-details-cell { background: var(--dark-surface-2); }
:root.dark .invoice-details-title { color: var(--dark-text); }
:root.dark .invoice-details-title i { color: #e67e22; }
:root.dark .expand-btn { color: #e67e22; }


/* ── Rechnungskontrolle Detail ────────────────────────────── */

/* RK Detail Stat Cards */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
.rk-stat-card { background: white; padding: 0.75rem; border-radius: var(--radius); box-shadow: var(--shadow-xs); border: 1px solid var(--gray-200); border-left: 3px solid transparent; }
.rk-stat-card:hover { box-shadow: var(--shadow-sm); }
.rk-stat-card .stat-label { font-size: 0.65rem; text-transform: uppercase; color: var(--gray-500); font-weight: 600; margin-bottom: 0.3rem; letter-spacing: 0.3px; }
.rk-stat-card .stat-val { font-size: 1rem; font-weight: 700; color: var(--gray-900); line-height: 1.2; }
.rk-stat-card .stat-sub { font-size: 0.65rem; margin-top: 0.25rem; }
.rk-stat-card.blue { border-left-color: #3b82f6; }
.rk-stat-card.green { border-left-color: var(--success); }
.rk-stat-card.neutral { border-left-color: var(--gray-500); }
.rk-stat-card.red { border-left-color: var(--error); }
.rk-stat-card.orange { border-left-color: var(--primary-500); }
:root.dark .rk-stat-card { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .rk-stat-card:hover { background: var(--dark-surface-2); }
:root.dark .rk-stat-card .stat-label { color: var(--dark-text-dim); }
:root.dark .rk-stat-card .stat-val { color: var(--dark-text); }

/* Week Navigation */
.week-nav { display: flex; align-items: center; gap: 0.75rem; background: white; padding: 0.5rem 1rem; border-radius: var(--radius); box-shadow: var(--shadow-xs); margin: 0 0 1.25rem; justify-content: center; border: 1px solid var(--gray-200); }
.nav-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: white; border: 1px solid var(--gray-200); border-radius: 50%; text-decoration: none; color: var(--gray-600); font-size: 0.78rem; transition: all var(--transition-fast); }
.nav-btn:hover:not(.disabled) { background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-700); }
.nav-btn.disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.current-week-display { display: flex; align-items: center; gap: 0.75rem; }
.cw-label { font-size: 0.92rem; font-weight: 700; color: var(--gray-900); white-space: nowrap; }
.cw-label span { color: var(--primary-500); }
.jump-select { padding: 0.35rem 1.5rem 0.35rem 0.5rem; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 500; color: var(--gray-700); background: var(--gray-50); cursor: pointer; transition: all var(--transition-fast); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.4rem center; font-family: inherit; }
.jump-select:hover { border-color: var(--primary-500); background-color: white; }
.jump-select:focus { outline: none; border-color: var(--primary-500); box-shadow: var(--shadow-glow); }

/* Stat Sub-Value */
.stat-sub { font-size: 0.65rem; margin-top: 0.25rem; }

/* Search Bar (Detail) */
.search-bar { background: white; padding: 0.75rem 1rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 0.5rem; border: 1px solid var(--gray-200); }
.search-form { display: flex; gap: 0.75rem; align-items: center; }
.search-form .search-input { padding-left: 0.75rem; }
.search-btn { padding: 0.45rem 0.75rem; background: var(--primary-500); color: white; border: none; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; transition: all var(--transition-fast); display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; }
.search-btn:hover { background: var(--primary-600); }
.search-clear { padding: 0.45rem 0.65rem; background: var(--gray-100); color: var(--gray-700); border: none; border-radius: var(--radius-sm); font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; transition: all var(--transition-fast); font-size: 0.78rem; }
.search-clear:hover { background: var(--gray-200); color: var(--gray-900); }
.search-info { margin-top: 0.4rem; font-size: 0.75rem; color: var(--gray-500); display: flex; align-items: center; gap: 0.4rem; }

/* Expandable Rows */
.expandable-row { cursor: pointer; transition: background var(--transition-fast); user-select: none; -webkit-user-select: none; }
.expandable-row:hover { background: var(--primary-25) !important; }
.expandable-row.expanded { background: var(--gray-25); }
.expand-icon { transition: transform var(--transition-fast); display: inline-block; width: 18px; text-align: center; color: var(--primary-500); }
.expandable-row.expanded .expand-icon { transform: rotate(90deg); }
.detail-row { display: none; background: var(--gray-25); }
.detail-row.show { display: table-row; }
.detail-cell { border-top: 1px solid var(--gray-200); }

/* Detail Table Helpers */
.col-highlight { background: var(--gray-50); }
:root.dark .col-highlight { background: var(--dark-surface-2); }
.text-center { text-align: center; }
.text-italic { font-style: italic; }
.text-primary { color: var(--primary-600); }
.text-warning { color: var(--warning); font-size: 0.65rem; }
.status-dot { font-size: 0.6rem; }
.status-dot.status-ok { color: var(--success); }
.status-dot.status-open { color: var(--error); }
.auftrag-cell { display: flex; align-items: center; gap: 0.5rem; }
.ext-link-icon { font-size: 0.6rem; margin-left: 0.2rem; opacity: 0.6; }
.detail-indent { padding-left: 1rem; }
.pdf-links { margin-top: 0.25rem; display: flex; flex-direction: column; gap: 0.2rem; }
:root.dark .text-primary { color: #e67e22; }
:root.dark .status-dot.status-ok { color: #34d399; }
:root.dark .status-dot.status-open { color: #f87171; }

/* Detail Column Toggle */
.detail-col { display: none; }
table.show-details .detail-col { display: table-cell; }

/* Sort Icons */
.sort-icon { font-size: 0.6rem; margin-left: 0.2rem; opacity: 0.4; transition: opacity var(--transition-fast); }
th[onclick] { user-select: none; cursor: pointer; }
th[onclick]:hover { color: var(--primary-600); }
th[onclick]:hover .sort-icon { opacity: 0.8; }
th.sort-active .sort-icon { opacity: 1; color: var(--primary-500); }

/* Firma Filter */
.firma-filter-bar { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }
.firma-filter-bar .firma-alle { }
.firma-filter-bar .search-info { margin-top: 0; font-size: 0.72rem; }
.firma-filter-btn { padding: 0.3rem 0.6rem; border-radius: var(--radius-sm); font-size: 0.72rem; font-weight: 500; text-decoration: none; border: 1px solid var(--gray-200); color: var(--gray-600); background: white; transition: all var(--transition-fast); cursor: pointer; }
.firma-filter-btn:hover { box-shadow: var(--shadow-xs); }
.firma-filter-btn.active { color: white; border-color: transparent; }
.firma-filter-btn.firma-elexx.active { background: #E28913; border-color: #E28913; }
.firma-filter-btn.firma-lexxcontrol.active { background: #008B8B; border-color: #008B8B; }
.firma-filter-btn.firma-mida.active { background: #1e40af; border-color: #1e40af; }
.firma-filter-btn.firma-elexx:hover:not(.active) { color: #E28913; border-color: #E28913; }
.firma-filter-btn.firma-lexxcontrol:hover:not(.active) { color: #008B8B; border-color: #008B8B; }
.firma-filter-btn.firma-mida:hover:not(.active) { color: #1e40af; border-color: #1e40af; }

/* Auftrag Link */
.auftrag-link { color: inherit; text-decoration: none; font-weight: 600; }
.auftrag-link:hover { color: var(--primary-600); }

/* Contenteditable Bemerkung */
.bemerkung-cell[contenteditable] { min-height: 1.2em; padding: 0.2rem 0.35rem; border-radius: var(--radius-xs); font-size: 0.78rem; color: var(--gray-700); cursor: text; transition: all var(--transition-fast); outline: 2px solid transparent; border-bottom: 1px dashed var(--gray-300); }
.bemerkung-cell[contenteditable]:empty::before { content: 'Bemerkung...'; color: var(--gray-400); font-style: italic; }
.bemerkung-cell[contenteditable]:hover { border-bottom-color: var(--primary-300); }
.bemerkung-cell[contenteditable]:focus { background: var(--gray-100); outline: 2px solid var(--primary-300); border-bottom-color: transparent; }
:root.dark .bemerkung-cell[contenteditable] { color: var(--dark-text); border-bottom-color: var(--dark-border); }
:root.dark .bemerkung-cell[contenteditable]:empty::before { color: var(--dark-text-dim); }
:root.dark .bemerkung-cell[contenteditable]:hover { border-bottom-color: rgba(226,137,19,0.4); }
:root.dark .bemerkung-cell[contenteditable]:focus { background: var(--dark-surface-2); outline-color: #e67e22; }
:root.dark .auftrag-link:hover { color: #e67e22; }

/* Detail Dark Mode */
:root.dark .search-bar { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .search-btn { background: var(--primary-600); }
:root.dark .search-clear { background: var(--dark-surface-2); color: var(--dark-text-muted); }
:root.dark .search-clear:hover { background: var(--dark-surface-3); }
:root.dark .stat-val { color: var(--dark-text); }
:root.dark .cw-label { color: var(--dark-text); }
:root.dark .week-nav { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .nav-btn { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text-muted); }
:root.dark .nav-btn:hover:not(.disabled) { background: var(--dark-surface-3); border-color: #e67e22; color: #e67e22; }
:root.dark .cw-label span { color: #e67e22; }
:root.dark .jump-select { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
:root.dark .expandable-row:hover { background: var(--dark-surface-2) !important; }
:root.dark .expandable-row.expanded { background: var(--dark-surface-2); }
:root.dark .detail-row td { background: #151530; }
:root.dark .detail-cell { color: var(--dark-text); }
:root.dark .expand-icon { color: #e67e22; }
:root.dark .firma-filter-btn { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text-muted); }
:root.dark .firma-filter-btn:hover { background: var(--dark-surface-3); }
:root.dark .firma-filter-btn.active { color: white; }
:root.dark .diff-pos, :root.dark td.diff-pos, :root.dark .detail-cell.diff-pos, :root.dark .fw-bold.diff-pos { color: #34d399 !important; }
:root.dark .diff-neg, :root.dark td.diff-neg, :root.dark .detail-cell.diff-neg, :root.dark .fw-bold.diff-neg { color: #f87171 !important; }
:root.dark .storno-neg, :root.dark td.storno-neg, :root.dark .fw-bold.storno-neg { color: #f87171 !important; }
:root.dark .diff-wertung-wrap.nicht-gewertet .diff-toggle-icon { color: #fbbf24; }

/* ── Rechnungskontrolle Mobile ────────────────────────────── */
@media (max-width: 768px) {
    /* Dashboard Boxes */
    .rk-dashboard { grid-template-columns: 1fr; }
    .dash-box-grouped { padding: 0.75rem; }

    /* Action Bar */
    .action-bar { padding: 0.5rem 0.75rem; flex-wrap: wrap; justify-content: center; }

    /* Upload */
    .upload-area { padding: 1rem; }
    .upload-actions-bar { flex-direction: column; }

    /* Filter / Search */
    .card-header-flex { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .card-header-flex h3 { margin-bottom: 0; }
    .card-header-search { flex-wrap: wrap; }
    input[type="date"].form-input-sm { width: 100%; }
    .filter-form { flex-direction: column; align-items: stretch; }
    .filter-form .form-group { width: 100%; }

    /* Invoice Form */
    .invoice-form-header { flex-direction: column; }
    .info-box { flex-direction: column; gap: 0.75rem; }

    /* Stat Cards */
    .stats-row { grid-template-columns: 1fr; }
    .statistik-grid { grid-template-columns: 1fr; }

    /* Week Nav */
    .week-nav { flex-wrap: wrap; padding: 0.5rem 0.75rem; gap: 0.5rem; }
    .jump-select { width: 100%; }

    /* Search Bar */
    .search-form { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .search-form .search-input { width: 100%; }
    .search-btn, .search-clear { width: 100%; justify-content: center; }

    /* Tables */
    .table-card { border-radius: var(--radius-sm); }
    .main-table { font-size: 0.72rem; }
    .main-table th, .main-table td { padding: 0.3rem 0.4rem; }
    .inline-edit-cell { max-width: 120px; }
    .bemerkung-cell[contenteditable] { font-size: 0.72rem; }

    /* Pagination */
    .pagination { gap: 0.25rem; }
    .pagination-info { width: 100%; text-align: center; margin-right: 0; margin-bottom: 0.35rem; }
    .pagination-btn { min-width: 26px; height: 26px; font-size: 0.68rem; }

    /* Expandable Rows */
    .auftrag-cell { gap: 0.35rem; }
    .expand-icon { width: 14px; }
    .detail-indent { padding-left: 0.5rem; }
    .pdf-links { gap: 0.15rem; }

    /* Firma Filter */
    .firma-filter-btn { padding: 0.25rem 0.5rem; font-size: 0.68rem; }
}


/* ── Email Modal (Montageberichtgenerator) ────────────────── */
.email-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.email-modal-overlay.show { opacity: 1; visibility: visible; }
.email-modal-dialog { background: white; border-radius: var(--radius-lg); max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); transform: scale(0.8) translateY(-20px); transition: transform 0.3s ease; font-family: inherit; }
.email-modal-overlay.show .email-modal-dialog { transform: scale(1) translateY(0); }
.email-modal-header { padding: 1rem; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; background: var(--gray-50); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.email-modal-header-content { display: flex; align-items: center; gap: 0.75rem; }
.email-modal-icon { width: 32px; height: 32px; background: linear-gradient(135deg, var(--success), #20c997); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.85rem; }
.email-modal-title { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--gray-800); }
.email-modal-subtitle { margin: 0; font-size: 0.72rem; color: var(--gray-500); }
.email-modal-close { background: none; border: none; font-size: 1rem; color: var(--gray-500); cursor: pointer; padding: 0.4rem; border-radius: var(--radius-xs); transition: all var(--transition-fast); }
.email-modal-close:hover { background: var(--gray-100); color: var(--gray-700); }
.email-modal-content { padding: 1.25rem; }
.email-pdf-info-section { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 0.85rem; margin-bottom: 1rem; }
.email-pdf-info-header { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--gray-600); margin-bottom: 0.35rem; font-size: 0.78rem; }
.email-pdf-filename { font-family: monospace; font-size: 0.78rem; color: var(--gray-500); word-break: break-all; }
.email-form-section { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.email-form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.email-form-label { display: flex; align-items: center; gap: 0.4rem; font-weight: 550; color: var(--gray-700); font-size: 0.78rem; }
.email-form-label i { color: var(--gray-400); width: 14px; }
.email-form-input, .email-form-textarea { padding: 0.5rem 0.7rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 0.78rem; transition: all var(--transition); background: white; font-family: inherit; width: 100%; box-sizing: border-box; color: var(--gray-800); }
.email-form-input:focus, .email-form-textarea:focus { outline: none; border-color: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,0.1); }
.email-form-textarea { resize: vertical; min-height: 70px; }
.email-help-text { font-size: 0.68rem; color: var(--gray-400); display: flex; align-items: center; gap: 0.2rem; }
.email-info-box { background: var(--info-light); border: 1px solid #bfdbfe; border-radius: var(--radius-sm); padding: 0.75rem; margin-bottom: 1rem; display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.78rem; color: #1e40af; }
.email-info-icon { font-size: 0.78rem; margin-top: 0.1rem; }
.email-loading-state { display: none; text-align: center; padding: 1.5rem; background: var(--gray-50); border-radius: var(--radius-sm); margin-bottom: 0.75rem; }
.email-loading-spinner { font-size: 1.5rem; color: var(--success); margin-bottom: 0.5rem; }
.email-loading-text { margin: 0; color: var(--gray-500); font-weight: 500; font-size: 0.78rem; }
.email-message-display { display: none; padding: 0.75rem; border-radius: var(--radius-sm); margin-bottom: 0.75rem; font-size: 0.78rem; }
.email-message-success { background: var(--success-light); border: 1px solid #bbf7d0; color: #065f46; }
.email-message-error { background: var(--error-light); border: 1px solid #fecaca; color: #991b1b; }
.email-action-buttons { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
.email-btn { padding: 0.5rem 1rem; border: none; border-radius: var(--radius-sm); font-weight: 550; cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-family: inherit; }
.email-btn-send { background: var(--success); color: white; }
.email-btn-send:hover:not(:disabled) { background: #16a34a; }
.email-btn-cancel { background: var(--gray-500); color: white; }
.email-btn-cancel:hover { background: var(--gray-600); }
.email-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Pagination Wrapper */
.pagination-wrapper { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gray-200); flex-wrap: wrap; gap: 0.75rem; }
.pagination-controls { display: flex; gap: 0.35rem; align-items: center; }
.pagination-pages { display: flex; gap: 0.2rem; }

/* Email Modal Dark Mode */
:root.dark .email-modal-dialog { background: var(--dark-surface); }
:root.dark .email-modal-header { background: var(--dark-surface-2); border-color: var(--dark-border); }
:root.dark .email-modal-title { color: var(--dark-text); }
:root.dark .email-modal-subtitle { color: var(--dark-text-dim); }
:root.dark .email-modal-close { color: var(--dark-text-dim); }
:root.dark .email-modal-close:hover { background: var(--dark-surface-3); color: var(--dark-text); }
:root.dark .email-pdf-info-section { background: var(--dark-surface-2); border-color: var(--dark-border); }
:root.dark .email-form-input, :root.dark .email-form-textarea { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
:root.dark .email-form-label { color: var(--dark-text-muted); }
:root.dark .email-info-box { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.25); color: #60a5fa; }
:root.dark .email-loading-state { background: var(--dark-surface-2); }
:root.dark .email-message-success { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.25); color: #4ade80; }
:root.dark .email-message-error { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.25); color: #f87171; }

@media (max-width: 768px) {
    .email-modal-dialog { width: 95%; }
    .email-action-buttons { flex-direction: column; }
    .email-btn { width: 100%; justify-content: center; }
    .pagination-wrapper { flex-direction: column; align-items: stretch; }
    .pagination-controls { justify-content: center; }
    .pagination-info { text-align: center; }
}
/* Montageberichtgenerator - Seitenspezifische Styles */
/* Globale Styles kommen aus ../style.css */

/* Standort Cards */
.standort-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-xs);
}
.standort-card:last-child { margin-bottom: 0; }

.standort-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.standort-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.standort-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-900);
}

.standort-info {
    color: var(--gray-600);
    font-size: 0.78rem;
    margin-bottom: 1rem;
}

.standort-info i {
    color: var(--primary-500);
    margin-right: 0.5rem;
}

/* Montagebericht Badge */
.montagebericht-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--warning);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.montagebericht-badge i {
    font-size: 0.78rem;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--gray-500);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}


/* Utilities */
.mb-3 {
    margin-bottom: 1rem !important;
}

.text-muted {
    color: var(--gray-500) !important;
}

/* ===============================
   MONTAGEBERICHT MODAL STYLES
   =============================== */

/* Modal Base */
.mb-modal-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mb-modal-overlay.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

/* Modal Dialog */
.montage-modal-dialog {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    border: 1px solid var(--gray-200);
    font-size: 0.82rem;
}

.mb-modal-overlay.show .montage-modal-dialog {
    transform: scale(1);
}

/* Modal Header */
.montage-modal-header {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    border-bottom: 1px solid var(--gray-200);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.montage-modal-header-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.montage-modal-icon {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.2);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
}

.montage-modal-title-wrapper {
    flex: 1;
}

.montage-modal-title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

.montage-modal-subtitle {
    margin: 0.15rem 0 0 0;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.3;
}

.montage-modal-close {
    color: white;
    background: rgba(255,255,255,0.15);
    border: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 1rem;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.montage-modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

/* Modal Form */
.montage-modal-form {
    padding: 0;
}

/* Sections */
.montage-section {
    border-bottom: 1px solid #f1f5f9;
    background: white;
}

.montage-section:last-child {
    border-bottom: none;
    border-radius: 0 0 16px 16px;
}

.montage-section-header {
    background: var(--gray-50);
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.82rem;
}

.montage-section-header.required {
    background: #fef3c7;
    color: #92400e;
}

.montage-section-header.required::after {
    content: ' *';
    color: #dc2626;
    font-weight: 700;
}

.montage-section-header i {
    color: var(--primary-500);
    font-size: 0.82rem;
}

.montage-section-body {
    padding: 0.75rem 1rem;
}

/* Mode Selector */
.montage-mode-selector {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.montage-mode-option {
    flex: 1;
    cursor: pointer;
}

.montage-mode-option input[type="radio"] {
    display: none;
}

.montage-mode-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    color: #6b7280;
    font-weight: 500;
    font-size: 0.78rem;
    transition: all 0.2s ease;
    min-height: 50px;
}

.montage-mode-option input:checked + .montage-mode-button {
    border-color: #E28913;
    background: #fef7ed;
    color: #E28913;
    font-weight: 600;
}

.montage-mode-button:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

.montage-mode-option input:checked + .montage-mode-button:hover {
    border-color: #d97706;
    background: #fdead3;
}

/* Date Range */
.montage-date-range {
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.montage-date-input {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.montage-date-input label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #374151;
}

.montage-date-arrow {
    color: #E28913;
    font-size: 0.95rem;
    margin-top: 1.5rem;
}

/* Form Controls */
.montage-input, .montage-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.78rem;
    transition: all 0.2s ease;
    background: white;
}

.montage-input:focus, .montage-textarea:focus {
    outline: none;
    border-color: #E28913;
    box-shadow: 0 0 0 3px rgba(226, 137, 19, 0.1);
}

.montage-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

/* Form Groups */
.montage-form-group {
    margin-bottom: 1.25rem;
}

.montage-form-group:last-child {
    margin-bottom: 0;
}

.montage-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
    font-size: 0.78rem;
}

/* Required Notice */
.montage-required-notice {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #92400e;
    font-weight: 500;
}

.montage-required-notice i {
    color: #f59e0b;
}

/* Signature */
.montage-signature-wrapper {
    position: relative;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    overflow: hidden;
}

.montage-signature-canvas {
    width: 100%;
    height: 200px;
    display: block;
    cursor: crosshair;
    background: white;
}

.montage-signature-clear {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.montage-signature-clear:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

/* Action Buttons */
.montage-action-buttons {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
}

.montage-primary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.montage-secondary-actions {
    display: flex;
    justify-content: center;
}

.montage-action-btn {
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 1rem;
    text-decoration: none;
    font-size: 0.78rem;
}

.montage-btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.montage-btn-content i {
    font-size: 0.9rem;
}

.montage-btn-preview {
    background: #f3f4f6;
    color: #374151;
    border: 2px solid #e5e7eb;
}

.montage-btn-preview:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.montage-btn-submit {
    background: #E28913;
    color: white;
    border: 2px solid #E28913;
}

.montage-btn-submit:hover {
    background: #d97706;
    border-color: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(226, 137, 19, 0.3);
}

.montage-btn-cancel {
    background: transparent;
    color: #6b7280;
    border: 2px solid transparent;
    min-height: 48px;
}

.montage-btn-cancel:hover {
    background: #f9fafb;
    color: #374151;
    border-color: #e5e7eb;
}

/* Custom Alerts */
.custom-alert-overlay {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-alert-overlay.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.custom-alert-dialog {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.custom-alert-overlay.show .custom-alert-dialog {
    transform: scale(1);
}

.custom-alert-header {
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
    border-radius: 16px 16px 0 0;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.custom-alert-header.warning {
    background: #fffbeb;
    border-bottom-color: #fed7aa;
}

.custom-alert-header.info {
    background: #eff6ff;
    border-bottom-color: #bfdbfe;
}

.custom-alert-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
}

.custom-alert-header .custom-alert-icon {
    background: #ef4444;
}

.custom-alert-header.warning .custom-alert-icon {
    background: #f59e0b;
}

.custom-alert-header.info .custom-alert-icon {
    background: #3b82f6;
}

.custom-alert-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
}

.custom-alert-body {
    padding: 1rem;
}

.custom-alert-message {
    margin: 0 0 1rem 0;
    line-height: 1.6;
    color: #374151;
}

.custom-alert-message:last-child {
    margin-bottom: 0;
}

.custom-alert-actions {
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    border-radius: 0 0 16px 16px;
    background: #f8fafc;
}

.custom-alert-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.custom-alert-btn-primary {
    background: #E28913;
    color: white;
}

.custom-alert-btn-primary:hover {
    background: #d97706;
    transform: translateY(-1px);
}

.custom-alert-btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.custom-alert-btn-secondary:hover {
    background: #e5e7eb;
}

.custom-alert-btn-delete {
    background: #ef4444 !important;
    color: white !important;
}

.custom-alert-btn-delete:hover {
    background: #dc2626 !important;
    transform: translateY(-1px);
}

.custom-alert-btn-delete:disabled {
    background: #9ca3af !important;
    cursor: not-allowed;
    transform: none;
}

/* Delete Modal specific styles */
.delete-warning-box {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.delete-info-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.delete-filename {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    background: #f1f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* Action Buttons in Table */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
}

.action-buttons .btn {
    padding: 0.375rem 0.75rem;
    min-width: auto;
    width: auto;
}

.btn-delete {
    background: #ef4444 !important;
    color: white !important;
    border: 2px solid #ef4444 !important;
}

.btn-delete:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    transform: translateY(-1px);
}

.btn-delete i {
    color: white !important;
}

/* Info Box */
.info-box {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: var(--radius);
    font-size: 0.78rem;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-box i {
    color: var(--info);
    font-size: 1rem;
}

/* Success Toast */
.success-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #10b981;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* PDF Viewer Modal */
.pdf-viewer-modal {
    z-index: 10001 !important;
}

.pdf-viewer-header-btn:hover {
    background: #f3f4f6 !important;
    color: #374151 !important;
}

.pdf-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #6b7280;
}

.pdf-loading i {
    font-size: 2rem;
    margin-bottom: 1rem;
    animation: spin 1s linear infinite;
}

/* Animations removed – instant tab switching */

/* Loading States */
.btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn.loading i {
    animation: spin 1s linear infinite;
}

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

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }

    .card {
        padding: 1rem;
    }

    .search-box {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .montage-modal-dialog {
        width: 95%;
        max-height: 95vh;
        margin: 1rem;
    }
    
    .montage-modal-header {
        padding: 1rem;
    }
    
    .montage-section-body {
        padding: 1rem;
    }
    
    .montage-mode-selector {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .montage-date-range {
        flex-direction: column;
        gap: 1rem;
    }
    
    .montage-date-arrow {
        margin-top: 0;
        transform: rotate(90deg);
    }
    
    .montage-primary-actions {
        grid-template-columns: 1fr;
    }
    
    .custom-alert-dialog {
        width: 95%;
        margin: 1rem;
    }
    
    .custom-alert-actions {
        flex-direction: column;
    }
    
    .action-buttons {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .action-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Table responsiveness for mobile */
    .table-responsive table {
        font-size: 0.8rem;
    }
    
    .table-responsive th,
    .table-responsive td {
        padding: 0.5rem;
    }
    
    /* Spaltenüberschriften bleiben in einer Zeile */
    .table-responsive th {
        white-space: nowrap;
        font-size: 0.75rem;
    }
    
    .table-responsive th i {
        font-size: 0.75rem;
        margin-right: 0.25rem;
    }
    
    /* Sortier-Icons auf Mobile kleiner */
    .table-responsive th.sortable {
        padding-right: 1.5rem;
    }
    
    .table-responsive th.sortable::after {
        font-size: 0.65rem;
        right: 0.25rem;
    }
    
    /* Hide less important columns on mobile */
    @media (max-width: 600px) {
        /* Für Admins (mit Checkbox) */
        .table-responsive th:nth-child(6), /* Erstellt von */
        .table-responsive td:nth-child(6) {
            display: none;
        }
        
        /* Für Nicht-Admins (ohne Checkbox) - andere Spalten-Indizes */
        .table-responsive th:nth-child(5):not([style*="width"]), /* Erstellt von ohne Checkbox */
        .table-responsive td:nth-child(5):not([style*="text-align"]) {
            display: none;
        }
        
        /* Checkbox-Spalte kompakter machen */
        .table-responsive th:first-child,
        .table-responsive td:first-child {
            width: 30px;
            padding: 0.25rem;
        }
    }
}

/* ── Dark Mode (nur seitenspezifisch) ── */
:root.dark .standort-card,
:root.dark .montage-modal-dialog,
:root.dark .montage-section,
:root.dark .custom-alert-dialog {
    background: #1a1a2e;
    border-color: #2a2a4a;
    color: #e5e7eb;
}
:root.dark .montage-input,
:root.dark .montage-select {
    background: #222240;
    border-color: #3a3a5a;
    color: #e5e7eb;
}
:root.dark .montage-label {
    color: #d1d5db;
}
:root.dark .empty-state {
    color: #9ca3af;
}
:root.dark .montage-modal-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #222240 100%);
    border-bottom-color: #2a2a4a;
}
:root.dark .montage-modal-title {
    color: #e5e7eb;
}
:root.dark .montage-modal-subtitle {
    color: #9ca3af;
}
:root.dark .card-subtitle {
    color: #9ca3af;
}
:root.dark .standort-card:hover {
    background: #222240;
}


/* ══════════════════════════════════════════════════════════════
   AUFTRAG DETAIL
   ══════════════════════════════════════════════════════════════ */

/* Progress Bar (Auftrag Detail) */
.progress {
    height: 20px;
    background: var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1rem 0;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s infinite;
    border-radius: var(--radius);
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
    align-items: stretch;
}

.progress-stat {
    text-align: center;
    padding: 0.5rem;
    background: var(--gray-50);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.progress-stat-label {
    font-size: 0.65rem;
    color: var(--gray-600);
    margin-bottom: 0.2rem;
    font-weight: 500;
}

.progress-stat-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-900);
}

.progress-stat-value.success { color: var(--success); }
.progress-stat-value.warning { color: var(--warning); }
.progress-stat-value.error { color: var(--error); }

.progress-stat-value .btn {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Grid (Auftrag Detail) */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: -0.75rem;
}

.col {
    flex: 1;
    padding: 0.75rem;
}

.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0.75rem;
}

.col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding: 0.75rem;
}

/* Input Group */
.input-group {
    display: flex !important;
    width: 100%;
    position: relative;
    flex-direction: row !important;
}

.input-group .form-control {
    border-radius: var(--radius) 0 0 var(--radius) !important;
    border-right: none !important;
    flex: 1;
    margin-bottom: 0 !important;
}

.input-group .form-control:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-50);
}

.input-group-append {
    display: flex !important;
}

.input-group-append .btn {
    border-radius: 0 var(--radius) var(--radius) 0 !important;
    border: none !important;
    background: rgba(226, 137, 19, 0.1);
    color: var(--accent);
    transition: all 0.2s ease;
    margin-bottom: 0 !important;
    width: auto !important;
}

.input-group-append .btn:hover {
    background: rgba(226, 137, 19, 0.2);
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(226, 137, 19, 0.2);
}

.input-group-append .btn:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-50);
}

.input-group .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group .btn {
    border-left: 0;
}

.input-group .btn-outline-secondary {
    border-color: #dee2e6;
    color: #6c757d;
}

.input-group .btn-outline-secondary:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
    color: #495057;
}

@media (min-width: 481px) {
    .input-group {
        flex-direction: row !important;
    }
    .input-group .form-control {
        border-radius: var(--radius) 0 0 var(--radius) !important;
        border-right: none !important;
        margin-bottom: 0 !important;
    }
    .input-group-append .btn {
        border-radius: 0 var(--radius) var(--radius) 0 !important;
        border-left: none !important;
        width: auto !important;
    }
}

/* Rich Text Editor */
.text-toolbar {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0;
    padding: 0.5rem;
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: none;
    flex-wrap: wrap;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.text-btn {
    padding: 0.5rem;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.78rem;
    transition: all 0.2s;
    min-width: 36px;
    min-height: 36px;
    text-align: center;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.text-btn:hover, .text-btn:active {
    background: var(--gray-100);
    border-color: var(--primary-500);
    color: var(--primary-600);
}

.text-btn.active {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
}

.color-group {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
}

.color-btn {
    width: 24px;
    height: 24px;
    border: 2px solid var(--gray-300);
    border-radius: 50%;
    cursor: pointer;
    margin: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.color-btn:hover, .color-btn:active {
    border-color: var(--primary-500);
    transform: scale(1.1);
}

.highlight-btn {
    border-radius: var(--radius-sm);
}

.toolbar-separator {
    width: 1px;
    height: 24px;
    background: var(--gray-300);
    margin: 0 0.25rem;
    flex-shrink: 0;
}

.rich-editor {
    min-height: 80px;
    border: 2px solid var(--gray-200);
    border-radius: 0 0 var(--radius) var(--radius);
    border-top: none;
    padding: 0.4rem 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    line-height: 1.5;
    background: white;
    overflow-y: auto;
    max-height: 300px;
    word-wrap: break-word;
}

.rich-editor:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-50);
}

.rich-editor:empty:before {
    content: attr(placeholder);
    color: var(--gray-400);
    font-style: italic;
}

.rich-editor a { color: var(--primary-600); text-decoration: underline; }
.rich-editor a:hover { color: var(--primary-700); }
.rich-editor ul, .rich-editor ol { margin: 0.5rem 0; padding-left: 1rem; }
.rich-editor li { margin-bottom: 0.25rem; }
.rich-editor hr { border: none; border-top: 2px solid var(--gray-300); margin: 1rem 0; }

/* Accordion */
.accordion-item {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--primary-50) 100%);
    border-radius: var(--radius);
    margin-bottom: 0.35rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.2s ease;
    padding: 0 !important;
}

.accordion-item:hover, .accordion-item:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
}

.accordion-header {
    padding: 0.25rem 0.75rem;
    background: transparent;
    border-bottom: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    min-height: unset;
}

.accordion-item.collapsed .accordion-header { border-bottom: none; }
.accordion-header:hover, .accordion-header:active { background: transparent; }

.accordion-header h5 {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.2;
}

.accordion-header h5 i { color: var(--primary-500); }

.accordion-toggle {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    color: var(--primary-600);
    min-width: 20px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accordion-item.collapsed .accordion-toggle { transform: rotate(-90deg); }

.accordion-body {
    padding: 0.75rem 1rem;
    background: white;
    display: block;
}

.accordion-item.collapsed .accordion-body { display: none; }

/* Accordion Count Badges */
.accordion-count {
    font-size: 0.78rem;
    color: var(--gray-500);
    font-weight: 400;
    margin-left: 0.5rem;
}

.accordion-count-red {
    font-size: 0.78rem;
    color: var(--error);
    font-weight: 600;
    margin-left: 0.5rem;
}

.accordion-count-emphasis {
    display: inline-block;
    background: var(--primary-500);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.5rem;
    min-width: 24px;
    text-align: center;
}

.accordion-count-emphasis:empty { display: none; }

/* Standort Accordion */
.standort-accordion {
    background: white;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.standort-accordion-header {
    padding: 0.5rem 0.6rem;
    background: linear-gradient(135deg, var(--primary-50) 0%, rgba(226, 137, 19, 0.08) 100%);
    border-left: 4px solid var(--primary-500);
    border-bottom: 1px solid var(--gray-200);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    min-height: 44px;
}

.standort-accordion-header:hover, .standort-accordion-header:active {
    background: linear-gradient(135deg, var(--primary-100) 0%, rgba(226, 137, 19, 0.15) 100%);
}

.standort-accordion-header h5 {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-900);
}

.standort-accordion-toggle {
    font-size: 0.78rem;
    transition: transform 0.3s ease;
    color: var(--primary-600);
    min-width: 30px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.standort-accordion.collapsed .standort-accordion-toggle { transform: rotate(-90deg); }
.standort-accordion.collapsed .standort-accordion-header { border-bottom: none; }

.standort-accordion-body {
    padding: 1rem;
    background: white;
    display: block;
}

.standort-accordion.collapsed .standort-accordion-body { display: none; }

/* Standort Docs Kachel */
.standort-docs-kachel {
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    padding: 1rem;
    margin-top: 1rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.standort-docs-kachel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-300));
    border-radius: var(--radius) var(--radius) 0 0;
}

.standort-docs-kachel:hover {
    background: var(--primary-50);
    border-color: var(--primary-400);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.standort-docs-kachel h6 {
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
    position: relative;
}

.standort-docs-kachel h6::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 30px; height: 2px;
    background: var(--primary-500);
    border-radius: 1px;
}

.standort-docs-list {
    max-height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    margin-top: 0.5rem;
}

.standort-doc-item {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.standort-doc-item:last-child { margin-bottom: 0; }

.standort-doc-item:hover {
    background: var(--primary-50);
    border-color: var(--primary-300);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.standort-doc-item .btn-group { opacity: 0.7; transition: opacity 0.2s ease; }
.standort-doc-item:hover .btn-group { opacity: 1; }

/* Standort Docs Accordion */
.standort-docs-accordion { margin-top: 0.75rem !important; }
.standort-docs-accordion .accordion-header { padding: 0.75rem 1rem !important; min-height: 48px !important; }
.standort-docs-accordion .accordion-header h5 { font-size: 0.78rem !important; margin: 0 !important; }
.standort-docs-accordion .accordion-body { padding: 1rem !important; }
.standort-docs-accordion .accordion-count-emphasis {
    background: var(--primary-500) !important; color: white !important;
    font-size: 0.7rem !important; padding: 0.2rem 0.5rem !important; margin-left: 0.5rem !important;
}

/* Status Badge */
.status-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-weight: 600;
    color: white;
    font-size: 0.78rem;
    transition: all 0.3s ease;
}

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.72rem;
}

.bg-success { background: var(--success) !important; color: white; }
.bg-secondary { background: var(--gray-500) !important; color: white; }

/* Upload Area */
.upload-area {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius);
    padding: 1.25rem 1rem;
    text-align: center;
    background: var(--gray-50);
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-area:hover, .upload-area:active {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

.upload-area.dragover {
    border-color: var(--primary-500) !important;
    background-color: var(--primary-50) !important;
    transform: scale(1.02);
}

/* Confirm Modal */
.confirm-modal {
    display: none;
    position: fixed;
    z-index: 1070;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}

.confirm-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.confirm-modal-dialog {
    background: white;
    border-radius: var(--radius-lg);
    max-width: 400px;
    width: 100%;
    box-shadow: var(--shadow-xl);
}

.confirm-modal-header {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--error);
    color: white;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.confirm-modal-header h5 {
    margin: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.confirm-modal-body {
    padding: 1.25rem;
    text-align: center;
}

.confirm-modal-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: var(--gray-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.confirm-icon {
    font-size: 1.1rem;
    color: var(--warning);
    margin-bottom: 1rem;
}

/* PDF/File Viewer Modal */
.pdf-modal {
    display: none;
    position: fixed;
    z-index: 1060;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

.pdf-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-modal-dialog {
    background: white;
    border-radius: var(--radius-lg);
    width: 95%; height: 95%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
}

.pdf-modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gray-50);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.pdf-modal-body {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pdf-viewer {
    flex: 1;
    border: none;
    width: 100%;
}

/* Ampel-Faerbung fuer Positionszeilen */
.position-row-red {
    background: linear-gradient(90deg, #fefcfc 0%, #fef2f2 100%);
    border-left: 2px solid #f87171;
}
.position-row-red:hover, .position-row-red:active {
    background: linear-gradient(90deg, #fef2f2 0%, #fee2e2 100%);
    box-shadow: 0 1px 2px rgba(239, 68, 68, 0.06);
}

.position-row-yellow {
    background: linear-gradient(90deg, #fefdf8 0%, #fef9c3 100%);
    border-left: 2px solid #facc15;
}
.position-row-yellow:hover, .position-row-yellow:active {
    background: linear-gradient(90deg, #fef9c3 0%, #fef3c7 100%);
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.06);
}

.position-row-green {
    background: linear-gradient(90deg, #fcfdfb 0%, #f0fdf4 100%);
    border-left: 2px solid #4ade80;
}
.position-row-green:hover, .position-row-green:active {
    background: linear-gradient(90deg, #f0fdf4 0%, #dcfce7 100%);
    box-shadow: 0 1px 2px rgba(34, 197, 94, 0.06);
}

/* Fortschrittsbalken in Rueckmeldungs-Spalte */
.progress-cell {
    position: relative;
    padding: 0.5rem 0.6rem;
}

.progress-mini {
    height: 4px;
    background: var(--gray-100);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.progress-mini-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.progress-mini-bar.red { background: linear-gradient(90deg, #fca5a5, #f87171); }
.progress-mini-bar.yellow { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.progress-mini-bar.green { background: linear-gradient(90deg, #6ee7b7, #34d399); }

/* Tooltip fuer Fortschrittsanzeige */
.progress-tooltip {
    position: relative;
    cursor: help;
}

.progress-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%; left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.progress-tooltip:hover::after { opacity: 1; }

/* Positionen im Standort */
.position-list {
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: 1rem;
    margin-top: 1rem;
    border: 1px solid var(--gray-200);
}

.position-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-200);
}

.position-item:last-child { border-bottom: none; }
.position-info { flex: 1; }
.position-menge { width: 100px; margin-left: 1rem; }

/* Position Hinweis */
.position-hinweis-inline {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
    font-style: italic;
    line-height: 1.3;
}

.position-hinweis-inline i {
    color: var(--primary-400);
    margin-right: 0.25rem;
    font-size: 0.7rem;
}

/* Utilities */
.d-flex { display: flex !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end { justify-content: flex-end !important; }
.align-items-center { align-items: center !important; }
.mt-3 { margin-top: 1rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.text-end { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--gray-500) !important; }

/* Bemerkung bearbeiten */
.bem-edit-info {
    font-size: 0.72rem;
    color: var(--gray-600);
    margin-top: 0.25rem;
    font-style: italic;
}

.bem-edit-info i { margin-right: 0.25rem; }

/* Auftragtyp-spezifische Farben */
.auftragtyp-lexxcontrol {
    --primary-50: #f0f7fa;
    --primary-100: #d9ebf2;
    --primary-200: #b3d7e6;
    --primary-500: #3A728B;
    --primary-600: #2F5A70;
    --primary-700: #254755;
}

.auftragtyp-mida {
    --primary-50: #FEF7E6;
    --primary-100: #FDEAA7;
    --primary-200: #F7D75F;
    --primary-500: #F1C40F;
    --primary-600: #E8B907;
    --primary-700: #B8860B;
    --accent-blue: #3498DB;
    --accent-blue-light: #5DADE2;
    --accent-blue-dark: #2980B9;
}

.auftragtyp-mida .standort-accordion-header {
    background: linear-gradient(135deg, var(--primary-50) 0%, #EBF3FD 100%);
    border-left: 4px solid var(--accent-blue);
}
.auftragtyp-mida .standort-accordion-header:hover {
    background: linear-gradient(135deg, var(--primary-100) 0%, #D6E9F8 100%);
}
.auftragtyp-mida .standort-accordion-toggle { color: var(--accent-blue); }

/* Status-Filter Badges */
.status-filter-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.78rem;
    font-weight: 500;
    border: 2px solid transparent;
    user-select: none;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
}

.status-filter-badge[data-status="offen"] { background-color: transparent; color: var(--gray-400); border-color: var(--gray-200); }
.status-filter-badge[data-status="in-arbeit"] { background-color: transparent; color: #ffb74d; border-color: #ffcc80; }
.status-filter-badge[data-status="abgeschlossen"] { background-color: transparent; color: #81c784; border-color: #a5d6a7; }
.status-filter-badge:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.status-filter-badge.active[data-status="offen"] { background-color: var(--gray-500); color: white; border-color: var(--gray-600); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.status-filter-badge.active[data-status="in-arbeit"] { background-color: #ff9800; color: white; border-color: #f57c00; box-shadow: 0 2px 4px rgba(255,152,0,0.3); }
.status-filter-badge.active[data-status="abgeschlossen"] { background-color: #4caf50; color: white; border-color: #388e3c; box-shadow: 0 2px 4px rgba(76,175,80,0.3); }
.status-filter-badge.active:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

.status-icon { font-size: 0.72rem; margin-right: 0.5rem; vertical-align: middle; display: inline-block; }
.status-count { font-size: 0.78rem; font-weight: 600; }

/* Standort-Filter */
.standort-filter-section { transition: all 0.3s ease; }
.standort-filter-section .form-control:focus { border-color: var(--primary-500); box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25); }
.standort-filter-section .form-check-input:checked { background-color: var(--primary-500); border-color: var(--primary-500); }
.standort-filter-section .btn-outline-secondary:hover { background-color: var(--gray-100); border-color: var(--gray-400); }

/* CSS fuer rotierendes Zahnrad-Icon */
@keyframes rotateCog {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.status-badge .fa-cog { animation: rotateCog 2s linear infinite; }

/* ── Auftrag Detail Page Base Overrides ────────────────── */
.auftrag-detail-page { font-size: 13px; }

.auftrag-detail-page .container { max-width: 1500px; padding: 0 4rem; }

/* Card overrides */
.auftrag-detail-page .card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
    margin-bottom: 1.25rem;
    transition: all 0.2s ease;
}
.auftrag-detail-page .card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--gray-100);
}
.auftrag-detail-page .card h2 {
    color: var(--gray-900);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.auftrag-detail-page .card h2 i { color: var(--primary-500); }
.auftrag-detail-page .card h3, .auftrag-detail-page .card h4, .auftrag-detail-page .card h5 {
    color: var(--gray-900);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.auftrag-detail-page .card-subtitle {
    color: var(--gray-600);
    font-size: 0.78rem;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

/* Form overrides */
.auftrag-detail-page .form-group { margin-bottom: 1rem; }
.auftrag-detail-page .form-group label {
    font-size: 0.75rem;
    margin-bottom: 0.3rem;
    text-transform: none;
    letter-spacing: normal;
}
.auftrag-detail-page .form-label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.75rem;
}
.auftrag-detail-page .form-control,
.auftrag-detail-page .form-select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 0.78rem;
    background: white;
    transition: all 0.2s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.auftrag-detail-page .form-control:focus,
.auftrag-detail-page .form-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-50);
}
.auftrag-detail-page textarea.form-control {
    resize: vertical;
    min-height: 80px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
}
.auftrag-detail-page input::placeholder,
.auftrag-detail-page textarea::placeholder { font-size: 0.72rem; }
.auftrag-detail-page label { font-size: 0.75rem; margin-bottom: 0.3rem; }

/* Global input overrides */
.auftrag-detail-page input,
.auftrag-detail-page select,
.auftrag-detail-page textarea {
    font-size: 0.78rem;
    padding: 0.4rem 0.5rem;
}

/* Button overrides */
.auftrag-detail-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    font-family: inherit;
    min-height: 36px;
    height: auto;
    white-space: normal;
    letter-spacing: normal;
    line-height: normal;
}
.auftrag-detail-page .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.68rem;
    min-height: 30px;
}
.auftrag-detail-page .btn-primary {
    background: var(--primary-600);
    color: white;
    border: 2px solid var(--primary-600);
    box-shadow: none;
}
.auftrag-detail-page .btn-primary:hover {
    background: var(--primary-700);
    border-color: var(--primary-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.auftrag-detail-page .btn-success {
    background: var(--success);
    color: white;
    border: 2px solid var(--success);
}
.auftrag-detail-page .btn-success:hover {
    background: #059669;
    border-color: #059669;
}
.auftrag-detail-page .btn-danger {
    background: var(--error);
    color: white;
    border: 2px solid var(--error);
}
.auftrag-detail-page .btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}
.auftrag-detail-page .btn-outline-primary {
    background: transparent;
    color: var(--primary-600);
    border: 2px solid var(--primary-600);
}
.auftrag-detail-page .btn-outline-primary:hover {
    background: var(--primary-600);
    color: white;
}
.auftrag-detail-page .btn-secondary {
    background: var(--gray-600);
    color: white;
    border: 2px solid var(--gray-600);
}
.auftrag-detail-page .btn-secondary:hover {
    background: var(--gray-700);
    border-color: var(--gray-700);
}

/* Table overrides */
.auftrag-detail-page .table-responsive {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    -webkit-overflow-scrolling: touch;
}
.auftrag-detail-page table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    min-width: 600px;
}
.auftrag-detail-page th,
.auftrag-detail-page td {
    padding: 0.4rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.78rem;
}
.auftrag-detail-page th {
    background: var(--gray-50);
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--gray-700);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.auftrag-detail-page th:hover { background: var(--gray-100); color: var(--primary-600); }
.auftrag-detail-page th i { color: var(--primary-500); margin-right: 0.5rem; }
.auftrag-detail-page th .sort-icon { margin-left: 0.5rem; opacity: 0.7; }
.auftrag-detail-page tbody tr:hover { background: var(--gray-50); }

/* Modal overrides */
.auftrag-detail-page .modal {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}
.auftrag-detail-page .modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.auftrag-detail-page .modal-dialog {
    background: white;
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    margin: auto;
}
.auftrag-detail-page .modal-header {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gray-50);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.auftrag-detail-page .modal-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-900);
}
.auftrag-detail-page .modal-close {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: var(--gray-500);
    padding: 0;
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.auftrag-detail-page .modal-close:hover { background: var(--gray-200); color: var(--gray-700); }
.auftrag-detail-page .modal-body { padding: 1.25rem; }

/* Heading overrides */
.auftrag-detail-page h1 { font-size: 1.1rem; }
.auftrag-detail-page h2 { font-size: 0.95rem; }

/* ── Auftrag Detail Mobile ──────────────────────────────── */
@media (max-width: 768px) {
    .col-md-6, .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row { margin: -0.375rem; }
    .col { padding: 0.375rem; }

    .progress-stats { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .progress-stat { padding: 0.5rem; }
    .progress-stat-label { font-size: 0.7rem; }
    .progress-stat-value { font-size: 0.78rem; }

    .accordion-header { padding: 0.5rem 0.6rem; }
    .accordion-header h5 { font-size: 0.85rem; }
    .accordion-body { padding: 1rem; }
    .accordion-count-emphasis { font-size: 0.7rem; padding: 0.2rem 0.5rem; }

    .standort-accordion-header { padding: 0.5rem 0.6rem; }
    .standort-accordion-header h5 { font-size: 0.78rem; }
    .standort-accordion-body { padding: 0.75rem; }

    .text-toolbar { gap: 0.15rem; padding: 0.375rem; }
    .text-btn { padding: 0.375rem; min-width: 32px; min-height: 32px; font-size: 0.78rem; }
    .color-btn { width: 20px; height: 20px; }
    .toolbar-separator { height: 20px; }

    .position-list { padding: 0.75rem; }
    .position-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .position-menge { width: 100%; margin-left: 0; }

    .standort-docs-kachel { padding: 0.75rem; margin-top: 0.75rem; }
    .standort-docs-kachel h6 { margin-bottom: 0.5rem !important; padding-bottom: 0.375rem; }
    .standort-docs-list { max-height: 150px; padding: 0.375rem; }
    .standort-doc-item { padding: 0.375rem; margin-bottom: 0.375rem; }

    .confirm-modal-body { padding: 1rem; }
    .confirm-modal-footer { padding: 0.75rem 1rem; flex-direction: column; }
    .confirm-modal-footer .btn { width: 100%; }

    .pdf-modal-dialog { width: 100%; height: 100%; border-radius: 0; }
    .pdf-modal-header { border-radius: 0; }

    @media (max-width: 480px) {
        .input-group { flex-direction: column !important; }
        .input-group .form-control {
            border-radius: var(--radius) !important;
            border-right: 2px solid var(--gray-200) !important;
            margin-bottom: 0.5rem !important;
        }
        .input-group-append .btn {
            border-radius: var(--radius) !important;
            border: 2px solid var(--gray-200) !important;
            width: 100% !important;
        }
    }
}

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

/* Touch-Feedback */
@media (hover: none) and (pointer: coarse) {
    .text-btn:active,
    .accordion-header:active,
    .standort-accordion-header:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

/* iOS Safari Fixes */
@supports (-webkit-touch-callout: none) {
    .pdf-modal-dialog { -webkit-overflow-scrolling: touch; }
}

/* ── Auftrag Detail Dark Mode ──────────────────────────── */
:root.dark .accordion-item { background: linear-gradient(135deg, #1e1e38 0%, #222240 100%) !important; border: 1px solid #2a2a4a !important; box-shadow: none !important; }
:root.dark .accordion-item:hover { background: linear-gradient(135deg, #222240 0%, #2a2a4a 100%) !important; border-color: #3a3a5a !important; }
:root.dark .accordion-header { background: transparent !important; border-bottom: none !important; }
:root.dark .accordion-item.collapsed .accordion-header { border-bottom: none !important; }
:root.dark .accordion-body { background: #1a1a2e !important; }
:root.dark .accordion-header h5 { color: #f3f4f6 !important; }
:root.dark .accordion-count { background: #222240 !important; color: #e5e7eb !important; border: 1px solid #3a3a5a !important; }
:root.dark .accordion-count-red { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,0.3) !important; }
:root.dark .accordion-count-emphasis { background: #e67e22 !important; border: none !important; }
:root.dark .accordion-toggle { color: #9ca3af !important; }

:root.dark .standort-accordion { background: #1a1a2e !important; border: 1px solid #2a2a4a !important; box-shadow: none !important; }
:root.dark .standort-accordion-header { background: linear-gradient(135deg, #1e1e38 0%, rgba(226,137,19,0.1) 100%) !important; border-bottom: none !important; }
:root.dark .standort-accordion-header h5 { color: #f3f4f6 !important; }
:root.dark .standort-accordion-body { background: #1a1a2e !important; }
:root.dark .standort-docs-kachel { background: #1a1a2e !important; border-color: #2a2a4a !important; }
:root.dark .standort-doc-item { background: #222240 !important; border-color: #2a2a4a !important; color: #e5e7eb !important; }

:root.dark .rich-editor { background: #222240 !important; border-color: #3a3a5a !important; color: #e5e7eb; }
:root.dark .rich-editor:empty:before { color: #6b7280; }
:root.dark .text-toolbar { background: #1e1e38 !important; border-color: #3a3a5a !important; }
:root.dark .text-btn { background: #222240 !important; border-color: #3a3a5a !important; color: #e5e7eb !important; }
:root.dark .text-btn:hover { background: #2a2a4a !important; }

:root.dark .upload-area { background: #1e1e38 !important; border-color: #3a3a5a !important; color: #9ca3af !important; }
:root.dark .input-group-append .btn { background: rgba(226, 137, 19, 0.15) !important; }

:root.dark .progress-stat { background: #1e1e38 !important; border-color: #2a2a4a !important; }
:root.dark .progress-stat-label { color: #9ca3af !important; }
:root.dark .progress-stat-value { color: #e5e7eb !important; }

:root.dark .position-row-red { background: linear-gradient(90deg, #1a1a2e 0%, rgba(239,68,68,0.1) 100%) !important; }
:root.dark .position-row-red:hover { background: linear-gradient(90deg, rgba(239,68,68,0.1) 0%, rgba(239,68,68,0.15) 100%) !important; }
:root.dark .position-row-yellow { background: linear-gradient(90deg, #1a1a2e 0%, rgba(245,158,11,0.1) 100%) !important; }
:root.dark .position-row-yellow:hover { background: linear-gradient(90deg, rgba(245,158,11,0.1) 0%, rgba(245,158,11,0.15) 100%) !important; }
:root.dark .position-row-green { background: linear-gradient(90deg, #1a1a2e 0%, rgba(16,185,129,0.1) 100%) !important; }
:root.dark .position-row-green:hover { background: linear-gradient(90deg, rgba(16,185,129,0.1) 0%, rgba(16,185,129,0.15) 100%) !important; }
:root.dark .position-list { background: #1e1e38 !important; border-color: #2a2a4a !important; }
:root.dark .position-item { border-bottom-color: #2a2a4a !important; color: #e5e7eb !important; }
:root.dark .position-info { color: #e5e7eb !important; }
:root.dark .position-menge { color: #e5e7eb !important; }

:root.dark .status-filter-badge { border-color: #3a3a5a !important; }
:root.dark .standort-filter-section { background: #1a1a2e !important; border-color: #2a2a4a !important; }
:root.dark .bem-edit-info { color: #9ca3af !important; }
:root.dark .pdf-modal-dialog { background: #1a1a2e !important; }
:root.dark .pdf-modal-header { background: #222240 !important; border-bottom-color: #2a2a4a !important; color: #e5e7eb !important; }
:root.dark .confirm-modal-dialog { background: #1a1a2e !important; color: #e5e7eb !important; }
:root.dark .confirm-modal-body { background: #1a1a2e !important; }
:root.dark .confirm-modal-footer { background: #222240 !important; border-top-color: #2a2a4a !important; }
:root.dark .info-box { background: #1e1e38 !important; border-left-color: #3a3a5a !important; color: #d1d5db !important; }

/* Inline-Style Dark Overrides */
:root.dark [style*="background: white"],
:root.dark [style*="background:#fff"],
:root.dark [style*="background: #fff"] { background: #222240 !important; border-color: #2a2a4a !important; color: #e5e7eb !important; }
:root.dark [style*="background: var(--gray-50)"] { background: #1a1a2e !important; }
:root.dark [style*="background: #f8fafc"],
:root.dark [style*="background: #f8f9fa"] { background: #1e1e38 !important; }
:root.dark [style*="background: #fff3cd"] { background: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; }
:root.dark [style*="background: #fee2e2"] { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; }
:root.dark [style*="background: #d1e7dd"] { background: rgba(16,185,129,0.15) !important; border-color: #10b981 !important; }
:root.dark .ansprechpartner-box { background: #222240 !important; border-left-color: #3a3a5a !important; }

/* ══════════════════════════════════════════════════════════════
   INVENTAR
   ══════════════════════════════════════════════════════════════ */
.inventar-search { display: flex; gap: 0.35rem; margin-bottom: 0.5rem; align-items: center; }
.inventar-search-wrap { flex: 1; position: relative; }
.inventar-search-wrap > i { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: 0.72rem; pointer-events: none; }
.inventar-search-wrap .form-control { padding-left: 2rem; }
.inventar-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.inventar-btns { display: flex; gap: 0.35rem; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════
   GLOBALE MOBILE OPTIMIERUNG
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Basis-Layout */
    .container { padding: 0 0.4rem !important; }
    main { padding-bottom: 70px !important; }

    /* Hero kompakt */
    .hero { padding: 0.25rem 0 0.1rem !important; margin-bottom: 0.15rem !important; }
    .hero h1 { font-size: 0.9rem !important; }
    .hero p { font-size: 0.65rem !important; margin-top: 0.1rem !important; }

    /* Cards */
    .card { padding: 0.5rem !important; margin-bottom: 0.3rem !important; }
    .card h3 { font-size: 0.72rem !important; margin-bottom: 0.2rem !important; }

    /* Buttons kleiner */
    .btn, .btn-detail, .detail-btn { height: 26px !important; padding: 0 0.45rem !important; font-size: 0.62rem !important; gap: 0.2rem !important; }
    .btn-sm { height: 22px !important; padding: 0 0.35rem !important; font-size: 0.58rem !important; }
    .btn i { font-size: 0.55rem !important; }

    /* Tabs scrollbar */
    .nav-tabs {
        flex-wrap: nowrap !important; overflow-x: auto !important;
        scrollbar-width: none !important; -webkit-overflow-scrolling: touch;
        gap: 0 !important; padding: 0.1rem !important; margin-bottom: 0.25rem !important;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tab { white-space: nowrap !important; font-size: 0.62rem !important; padding: 0.25rem 0.45rem !important; flex-shrink: 0 !important; }

    /* Tabellen horizontal scrollbar */
    .table-responsive, .table-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

    /* Stats kompakt */
    .stats-grid { gap: 0.25rem !important; }
    .stat-card { padding: 0.35rem !important; }
    .stat-number { font-size: 0.95rem !important; }
    .stat-label { font-size: 0.55rem !important; }
    .stat-icon { font-size: 0.9rem !important; }

    /* Forms - 16px verhindert iOS Zoom */
    .form-control, input[type="text"], input[type="search"], input[type="email"],
    input[type="password"], input[type="number"], input[type="date"],
    select, textarea,
    .filter-group input, .filter-group select, .filter-group textarea {
        font-size: 16px !important;
    }
    .filter-bar { gap: 0.2rem !important; flex-wrap: wrap !important; }
    .filter-group label { font-size: 0.6rem !important; }

    /* Toggle Switch */
    .toggle-switch { font-size: 0.58rem !important; }
    .toggle-track { width: 26px !important; height: 14px !important; }
    .toggle-track::after { width: 10px !important; height: 10px !important; }

    /* Modals fullscreen */
    .modal-overlay .modal {
        max-width: 100% !important; width: calc(100% - 0.5rem) !important;
        margin: 0.25rem !important; max-height: 92vh !important;
    }
    .modal h3 { font-size: 0.72rem !important; }
    .modal-actions { flex-direction: column !important; gap: 0.2rem !important; }
    .modal-actions .btn { width: 100% !important; }

    /* Filter-Rows */
    .filter-row-4, .filter-row-6, .filter-row-3, .filter-row-2 { grid-template-columns: 1fr !important; gap: 0.25rem !important; }
}


/* ============================================================
   Benutzer Page
   ============================================================ */

.page-benutzer .stats-grid { grid-template-columns: repeat(3, 1fr); }

.page-benutzer .action-bar {
    background: white; border-radius: var(--radius-lg); padding: 0.75rem 1rem;
    box-shadow: var(--shadow); border: 1px solid var(--gray-200); margin-bottom: 1rem;
    max-width: none; justify-content: flex-end;
}

.page-benutzer .tabs-container {
    background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow);
    border: 1px solid var(--gray-200); margin-bottom: 1.5rem; overflow: hidden;
}
.page-benutzer .tabs-header { display: flex; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
.page-benutzer .tab-btn {
    flex: 1; padding: 0.75rem 1rem; background: none; border: none; cursor: pointer;
    font-weight: 500; color: var(--gray-500); font-size: 0.8rem; position: relative;
    transition: all var(--transition); font-family: inherit;
}
.page-benutzer .tab-btn.active { color: var(--primary-600); background: white; }
.page-benutzer .tab-btn.active::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: var(--primary-600);
}
.page-benutzer .tab-btn:hover:not(.active) { color: var(--gray-800); background: var(--gray-100); }
.page-benutzer .tab-content { display: none; padding: 1.25rem; }
.page-benutzer .tab-content.active { display: block; }
.page-benutzer .tab-content h2 {
    color: var(--gray-900); margin: 0 0 1rem; font-size: 1.1rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.5rem;
}

.page-benutzer .filter-section { margin-bottom: 1.25rem; }
.page-benutzer .filter-group { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.page-benutzer .filter-select {
    flex: 0; min-width: 180px; padding: 0.5rem 0.75rem;
    border: 2px solid var(--gray-200); border-radius: var(--radius);
    font-size: 0.8rem; background: white; font-family: inherit; cursor: pointer;
}
.page-benutzer .filter-select:focus { outline: none; border-color: var(--primary-500); }
.page-benutzer .search-input { flex: 1; min-width: 200px; padding-left: 0.75rem; text-align: left; }

.page-benutzer .table-user-info { display: flex; align-items: center; gap: 0.5rem; }
.page-benutzer .table-user-avatar {
    width: 28px; height: 28px; border-radius: 50%; background: var(--primary-600);
    color: white; display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.65rem; flex-shrink: 0;
}
.page-benutzer .table-customer-avatar {
    width: 28px; height: 28px; border-radius: 50%; background: var(--info);
    color: white; display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.65rem; flex-shrink: 0;
}
.page-benutzer .table-user-name { font-weight: 600; color: var(--gray-900); }
.page-benutzer .table-role-badge {
    padding: 0.15rem 0.4rem; border-radius: 5px; font-size: 0.65rem;
    font-weight: 600; letter-spacing: 0.025em;
}

.page-benutzer .action-cell { text-align: center; white-space: nowrap; }
.page-benutzer .action-btn {
    margin: 0 1px; padding: 0.3rem; border: none; border-radius: 5px;
    cursor: pointer; font-size: 0.7rem; width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--transition); background: var(--gray-200); color: var(--gray-600);
}
.page-benutzer .action-btn.edit { background: var(--success); color: white; }
.page-benutzer .action-btn.edit:hover { background: #059669; }
.page-benutzer .action-btn.delete { background: var(--error); color: white; }
.page-benutzer .action-btn.delete:hover { background: #dc2626; }
.page-benutzer .action-btn.otp { background: var(--info); color: white; }
.page-benutzer .action-btn.otp:hover { background: #2563eb; }

.page-benutzer .address-link {
    color: var(--primary-600); text-decoration: none; font-weight: 500;
    display: inline-flex; align-items: center; gap: 0.2rem;
}
.page-benutzer .address-link:hover { text-decoration: underline; }
.page-benutzer .address-link i { font-size: 0.65rem; opacity: 0.7; }
.page-benutzer .customer-link { color: var(--primary-600); text-decoration: none; font-weight: 500; }
.page-benutzer .customer-link:hover { text-decoration: underline; }

.page-benutzer .modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.page-benutzer .btn-cancel { background: var(--gray-200); color: var(--gray-700); }
.page-benutzer .btn-cancel:hover { background: var(--gray-300); }
.page-benutzer .btn-confirm { background: var(--error); color: white; }
.page-benutzer .btn-confirm:hover { background: #dc2626; }

.page-benutzer .export-dropdown { position: relative; display: inline-block; }
.page-benutzer .export-menu {
    display: none; position: absolute; right: 0; top: 100%; background: white;
    border: 1px solid var(--gray-200); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); z-index: 100; min-width: 200px; margin-top: 0.25rem;
}
.page-benutzer .export-menu.open { display: block; }
.page-benutzer .export-menu a {
    display: block; padding: 0.6rem 1rem; color: var(--gray-800);
    text-decoration: none; font-size: 0.8rem; border-bottom: 1px solid var(--gray-100);
}
.page-benutzer .export-menu a:last-child { border-bottom: none; }
.page-benutzer .export-menu a:hover { background: var(--gray-50); }

.page-benutzer .mobile-cards { display: none; }
.page-benutzer .user-card {
    background: white; border-radius: var(--radius-lg); padding: 1rem;
    margin-bottom: 0.75rem; box-shadow: var(--shadow); border: 1px solid var(--gray-200);
}
.page-benutzer .user-card-header { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; }
.page-benutzer .user-card-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--primary-600);
    color: white; display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.8rem; flex-shrink: 0;
}
.page-benutzer .customer-card-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--info);
    color: white; display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.8rem; flex-shrink: 0;
}
.page-benutzer .user-card-info { flex: 1; min-width: 0; }
.page-benutzer .user-card-firstname { font-weight: 600; color: var(--gray-900); font-size: 0.85rem; }
.page-benutzer .user-card-lastname,
.page-benutzer .user-card-email { font-weight: 500; color: var(--gray-500); font-size: 0.75rem; }
.page-benutzer .user-card-actions { display: flex; gap: 0.25rem; flex-shrink: 0; }
.page-benutzer .mobile-action-btn {
    width: 30px; height: 30px; border-radius: 5px; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: white;
}
.page-benutzer .mobile-action-btn.edit { background: var(--success); }
.page-benutzer .mobile-action-btn.delete { background: var(--error); }
.page-benutzer .mobile-action-btn.otp { background: var(--info); }
.page-benutzer .user-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.page-benutzer .user-card-field { display: flex; flex-direction: column; }
.page-benutzer .user-card-address { grid-column: span 2; }
.page-benutzer .user-card-label {
    font-size: 0.6rem; font-weight: 600; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: 0.025em; margin-bottom: 0.15rem;
}
.page-benutzer .user-card-value { font-size: 0.75rem; color: var(--gray-800); font-weight: 500; }
.page-benutzer .user-card-role {
    grid-column: span 2; display: flex; align-items: center; gap: 0.5rem;
    padding-top: 0.5rem; border-top: 1px solid var(--gray-200);
}
.page-benutzer .mobile-role-badge { padding: 0.2rem 0.4rem; border-radius: 5px; font-size: 0.6rem; font-weight: 600; }
.page-benutzer .mobile-address-link {
    color: var(--primary-600); text-decoration: none; font-weight: 500; font-size: 0.75rem;
    display: inline-flex; align-items: center; gap: 0.2rem;
}
.page-benutzer .mobile-address-link:hover { text-decoration: underline; }
.page-benutzer .mobile-address-link i { font-size: 0.55rem; opacity: 0.7; }

:root.dark .page-benutzer .stat-card,
:root.dark .page-benutzer .tabs-container,
:root.dark .page-benutzer .action-bar { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .page-benutzer .tabs-header { background: var(--dark-bg); border-color: var(--dark-border); }
:root.dark .page-benutzer .tab-btn { color: var(--dark-text-dim); }
:root.dark .page-benutzer .tab-btn.active { color: var(--primary-500); background: var(--dark-surface); }
:root.dark .page-benutzer .tab-btn:hover:not(.active) { background: var(--dark-surface-2); color: var(--dark-text); }
:root.dark .page-benutzer .tab-content h2 { color: var(--dark-text); }
:root.dark .page-benutzer .search-input,
:root.dark .page-benutzer .filter-select { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
:root.dark .page-benutzer .table-user-name { color: var(--dark-text); }
:root.dark .page-benutzer .address-link,
:root.dark .page-benutzer .customer-link { color: #f59e0b; }
:root.dark .page-benutzer .btn-cancel { background: var(--dark-surface-3); color: var(--dark-text); }
:root.dark .page-benutzer .export-menu { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .page-benutzer .export-menu a { color: var(--dark-text); border-color: var(--dark-border); }
:root.dark .page-benutzer .export-menu a:hover { background: var(--dark-surface-2); }
:root.dark .page-benutzer .user-card { background: var(--dark-surface); border-color: var(--dark-border); }
:root.dark .page-benutzer .user-card-firstname { color: var(--dark-text); }
:root.dark .page-benutzer .user-card-value { color: var(--dark-text); }
:root.dark .page-benutzer .user-card-role { border-color: var(--dark-border); }

@media (max-width: 768px) {
    .page-benutzer .table-responsive { display: none; }
    .page-benutzer .mobile-cards { display: block; }
    .page-benutzer .stats-grid { grid-template-columns: 1fr; gap: 0.5rem; }
    .page-benutzer .action-bar { flex-direction: column; }
    .page-benutzer .action-bar .btn { width: 100%; justify-content: center; }
    .page-benutzer .filter-group { flex-direction: column; }
    .page-benutzer .search-input,
    .page-benutzer .filter-select { min-width: auto; width: 100%; }
    .page-benutzer .hero h1 { font-size: 1.3rem; }
}


/* ============================================================
   Benutzer Anlegen / Bearbeiten Pages
   ============================================================ */

.page-benutzer-anlegen .container,
.page-benutzer-bearbeiten .container { max-width: 1100px; }

.page-benutzer-anlegen .form-card,
.page-benutzer-bearbeiten .form-card {
    background: white; border-radius: var(--radius-lg); padding: 1rem;
    box-shadow: var(--shadow); border: 1px solid var(--gray-200); margin-bottom: 0.75rem;
}
.page-benutzer-anlegen .form-section-title,
.page-benutzer-bearbeiten .form-section-title {
    font-size: 0.9rem; font-weight: 600; color: var(--gray-800);
    margin-bottom: 0.75rem; padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex; align-items: center; gap: 0.5rem;
}
.page-benutzer-anlegen .form-grid,
.page-benutzer-bearbeiten .form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: end;
}
.page-benutzer-anlegen .form-group.full-width,
.page-benutzer-bearbeiten .form-group.full-width { grid-column: span 2; }
.page-benutzer-anlegen .password-group,
.page-benutzer-bearbeiten .password-group { display: flex; flex-direction: column; gap: 0.5rem; }
.page-benutzer-anlegen .form-actions,
.page-benutzer-bearbeiten .form-actions {
    display: flex; gap: 0.75rem; justify-content: center; margin-top: 0.75rem;
}
.page-benutzer-anlegen .btn-generate,
.page-benutzer-bearbeiten .btn-generate {
    background: var(--gray-500); color: white; padding: 0.4rem 0.85rem;
    font-size: 0.75rem; min-width: auto;
}
.page-benutzer-anlegen .btn-generate:hover,
.page-benutzer-bearbeiten .btn-generate:hover { background: var(--gray-600); }
.page-benutzer-anlegen .form-group input.error,
.page-benutzer-bearbeiten .form-group input.error,
.page-benutzer-anlegen .form-group select.error,
.page-benutzer-bearbeiten .form-group select.error { border-color: var(--error); }

/* Bearbeiten: Checkbox groups */
.page-benutzer-bearbeiten .checkbox-group { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.page-benutzer-bearbeiten .checkbox-group label {
    display: flex; align-items: center; gap: 0.4rem; margin: 0; white-space: nowrap;
    font-size: 0.78rem; padding: 0.4rem 0.75rem; border-radius: var(--radius-full);
    border: 1.5px solid var(--gray-200); background: white; cursor: pointer; transition: all var(--transition);
}
.page-benutzer-bearbeiten .checkbox-group label:hover { border-color: var(--primary-300); background: var(--primary-50); }
.page-benutzer-bearbeiten .checkbox-group input[type="checkbox"] { margin: 0; width: auto; accent-color: var(--primary-500); }
.page-benutzer-bearbeiten .checkbox-group input[type="checkbox"]:checked + span,
.page-benutzer-bearbeiten .checkbox-group label:has(input:checked) { color: var(--primary-700); font-weight: 600; }

/* Bearbeiten: Dynamic lists */
.page-benutzer-bearbeiten .dynamic-list {
    margin-top: 0.75rem; padding: 0; background: transparent; border: none; box-shadow: none;
}
.page-benutzer-bearbeiten .list-items {
    display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem;
    min-height: 40px; padding: 0.75rem; border: none;
    border-radius: var(--radius); background: var(--gray-50);
}
.page-benutzer-bearbeiten .list-items:empty::before {
    content: 'Noch keine Einträge vorhanden...'; color: var(--gray-400); font-style: italic; font-size: 0.75rem;
}
.page-benutzer-bearbeiten .list-item {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700)); color: white;
    padding: 0.3rem 0.65rem; border-radius: var(--radius-full); font-size: 0.72rem;
    font-weight: 600; letter-spacing: 0.01em; box-shadow: 0 1px 3px rgba(217,119,6,0.25);
}
.page-benutzer-bearbeiten .list-item .remove-btn {
    background: none; border: none; color: white; cursor: pointer; padding: 0;
    width: 15px; height: 15px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; opacity: 0.7; font-size: 0.6rem; transition: all var(--transition);
}
.page-benutzer-bearbeiten .list-item .remove-btn:hover { opacity: 1; background: rgba(255,255,255,0.25); transform: scale(1.15); }

/* Bearbeiten: Predefined skills */
.page-benutzer-bearbeiten .predefined-skills {
    margin-bottom: 0.6rem; padding: 0; background: transparent; border: none;
}
.page-benutzer-bearbeiten .predefined-skills-title {
    font-size: 0.75rem; font-weight: 600; color: var(--gray-600);
    margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem;
}
.page-benutzer-bearbeiten .predefined-skills-title i { color: var(--primary-500); font-size: 0.7rem; }
.page-benutzer-bearbeiten .predefined-skills-grid {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.page-benutzer-bearbeiten .predefined-skill-btn {
    background: white; border: 1.5px solid var(--gray-200); color: var(--gray-600);
    padding: 0.3rem 0.6rem; border-radius: var(--radius-full); font-size: 0.72rem;
    cursor: pointer; transition: all var(--transition);
    display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 500;
}
.page-benutzer-bearbeiten .predefined-skill-btn i { font-size: 0.55rem; opacity: 0.5; }
.page-benutzer-bearbeiten .predefined-skill-btn:hover {
    background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-700);
    box-shadow: 0 1px 4px rgba(217,119,6,0.15);
}
.page-benutzer-bearbeiten .predefined-skill-btn:hover i { opacity: 1; color: var(--primary-500); }
.page-benutzer-bearbeiten .predefined-skill-btn.added {
    background: var(--success-light); border-color: var(--success); color: #166534;
    cursor: not-allowed; font-weight: 600;
}
.page-benutzer-bearbeiten .predefined-skill-btn.added i { color: var(--success); opacity: 1; }

/* Bearbeiten: Add input group */
.page-benutzer-bearbeiten .add-input-group {
    display: flex; gap: 0.5rem; align-items: center; padding: 0; margin-top: 0.5rem;
    background: transparent; border: none;
}
.page-benutzer-bearbeiten .add-input-group input {
    flex: 1; padding: 0.45rem 0.65rem; border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-full); font-size: 0.75rem; background: white;
    transition: all var(--transition);
}
.page-benutzer-bearbeiten .add-input-group input:focus { outline: none; border-color: var(--primary-500); box-shadow: var(--shadow-glow); }
.page-benutzer-bearbeiten .add-btn {
    background: var(--primary-600); color: white; border: none;
    padding: 0.45rem 0.85rem; border-radius: var(--radius-full); cursor: pointer;
    font-size: 0.72rem; font-weight: 600; display: flex; align-items: center;
    gap: 0.35rem; white-space: nowrap; transition: all var(--transition);
    box-shadow: 0 1px 3px rgba(217,119,6,0.2);
}
.page-benutzer-bearbeiten .add-btn:hover { background: var(--primary-700); box-shadow: 0 2px 6px rgba(217,119,6,0.3); }

/* Bearbeiten: Befähigungen */
.page-benutzer-bearbeiten .befaehigungen-list {
    margin-top: 0.75rem; padding: 0; background: transparent; border: none;
}
.page-benutzer-bearbeiten .bef-row {
    display: grid; grid-template-columns: 1fr 250px 230px 28px; align-items: center;
    gap: 0.6rem; margin-bottom: 0.4rem; padding: 0.55rem 0.75rem;
    background: white; border: 1.5px solid var(--gray-200); border-radius: var(--radius);
    transition: all var(--transition); border-left: 3px solid var(--primary-200);
}
.page-benutzer-bearbeiten .bef-row:hover { border-color: var(--primary-300); border-left-color: var(--primary-500); box-shadow: var(--shadow-sm); }
.page-benutzer-bearbeiten .bef-check { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; white-space: nowrap; }
.page-benutzer-bearbeiten .bef-check label { display: flex; align-items: center; gap: 0.35rem; margin: 0; cursor: pointer; }
.page-benutzer-bearbeiten .bef-check input[type="checkbox"] { accent-color: var(--primary-500); }
.page-benutzer-bearbeiten .bef-date { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; white-space: nowrap; color: var(--gray-600); }
.page-benutzer-bearbeiten .bef-date span { font-weight: 600; font-size: 0.68rem; color: var(--gray-500); }
.page-benutzer-bearbeiten .bef-date input[type="date"] {
    font-size: 0.75rem; font-weight: 500; padding: 0.35rem 0.55rem;
    border-radius: var(--radius-sm); border: 1.5px solid var(--gray-200);
    background: white; color: var(--gray-800); min-width: 135px;
    transition: all var(--transition); font-family: inherit;
}
.page-benutzer-bearbeiten .bef-date input[type="date"]:focus { outline: none; border-color: var(--primary-500); box-shadow: var(--shadow-glow); }
.page-benutzer-bearbeiten .befaehigung-remove {
    background: transparent; color: var(--gray-400); border: none;
    width: 28px; height: 28px; padding: 0; border-radius: var(--radius-sm);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; transition: all var(--transition);
}
.page-benutzer-bearbeiten .befaehigung-remove:hover { color: var(--error); background: rgba(239,68,68,0.08); }
.page-benutzer-bearbeiten .befaehigung-add {
    display: grid; grid-template-columns: 1fr 250px 230px auto; gap: 0.6rem;
    align-items: center; margin-top: 0.6rem; padding: 0.55rem 0.75rem;
    background: var(--gray-50); border-radius: var(--radius); border: 1.5px dashed var(--gray-300);
}
.page-benutzer-bearbeiten .befaehigung-add input[type="text"] {
    padding: 0.45rem 0.65rem; border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-full); font-size: 0.75rem; background: white;
}
.page-benutzer-bearbeiten .befaehigung-add input[type="date"] {
    padding: 0.35rem 0.55rem; border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 500;
    background: white; color: var(--gray-800); font-family: inherit;
}
.page-benutzer-bearbeiten .befaehigung-add input:focus { outline: none; border-color: var(--primary-500); box-shadow: var(--shadow-glow); }

/* Bearbeiten: Mitarbeiterstatus */
.page-benutzer-bearbeiten .status-section { border-top: 1px solid var(--gray-200); padding-top: 0.75rem; margin-top: 0.5rem; }
.page-benutzer-bearbeiten .status-section-label { font-size: 0.78rem !important; color: var(--gray-800) !important; margin-bottom: 0.4rem !important; }
.page-benutzer-bearbeiten .status-toggle { display: flex; gap: 0.35rem; }
.page-benutzer-bearbeiten .status-option {
    display: flex; align-items: center; gap: 0.3rem; margin: 0; cursor: pointer;
    padding: 0.3rem 0.65rem; border-radius: var(--radius-full); border: 1.5px solid var(--gray-200);
    background: white; transition: all var(--transition);
}
.page-benutzer-bearbeiten .status-option input[type="radio"] { display: none; }
.page-benutzer-bearbeiten .status-option span { font-weight: 500; font-size: 0.72rem; color: var(--gray-500); }
.page-benutzer-bearbeiten .status-option span i { font-size: 0.65rem; color: inherit; }
.page-benutzer-bearbeiten .status-option:hover { border-color: var(--gray-300); background: var(--gray-50); }
.page-benutzer-bearbeiten .status-active:has(input:checked) { background: var(--success); border-color: var(--success); }
.page-benutzer-bearbeiten .status-active:has(input:checked) span { color: white; font-weight: 600; }
.page-benutzer-bearbeiten .status-active:has(input:checked) span i { color: white; }
.page-benutzer-bearbeiten .status-inactive:has(input:checked) { background: var(--error); border-color: var(--error); }
.page-benutzer-bearbeiten .status-inactive:has(input:checked) span { color: white; font-weight: 600; }
.page-benutzer-bearbeiten .status-inactive:has(input:checked) span i { color: white; }

/* Dark mode */
:root.dark .page-benutzer-anlegen .form-card,
:root.dark .page-benutzer-bearbeiten .form-card { background: var(--dark-surface); border-color: var(--dark-border); color: var(--dark-text); }
:root.dark .page-benutzer-anlegen .form-section-title,
:root.dark .page-benutzer-bearbeiten .form-section-title { color: var(--dark-text); border-bottom-color: var(--dark-border); }
:root.dark .page-benutzer-anlegen .btn-generate,
:root.dark .page-benutzer-bearbeiten .btn-generate { background: var(--dark-surface-2); color: var(--dark-text-muted); }
:root.dark .page-benutzer-anlegen .btn-generate:hover,
:root.dark .page-benutzer-bearbeiten .btn-generate:hover { background: var(--dark-surface-3); }
:root.dark .page-benutzer-bearbeiten .list-items { background: var(--dark-surface-2); }
:root.dark .page-benutzer-bearbeiten .list-item { background: linear-gradient(135deg, var(--primary-600), var(--primary-700)); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
:root.dark .page-benutzer-bearbeiten .predefined-skill-btn { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text-muted); }
:root.dark .page-benutzer-bearbeiten .predefined-skill-btn:hover { background: var(--dark-surface-3); color: var(--primary-500); border-color: var(--primary-500); }
:root.dark .page-benutzer-bearbeiten .predefined-skills-title { color: var(--dark-text-dim); }
:root.dark .page-benutzer-bearbeiten .add-input-group input,
:root.dark .page-benutzer-bearbeiten .befaehigung-add input { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
:root.dark .page-benutzer-bearbeiten .bef-row { background: var(--dark-surface); border-color: var(--dark-border); border-left-color: var(--primary-500); }
:root.dark .page-benutzer-bearbeiten .bef-date { color: var(--dark-text-dim); }
:root.dark .page-benutzer-bearbeiten .bef-date input[type="date"] { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text); }
:root.dark .page-benutzer-bearbeiten .befaehigung-remove { color: var(--dark-text-dim); }
:root.dark .page-benutzer-bearbeiten .befaehigung-remove:hover { color: var(--error); background: rgba(239,68,68,0.1); }
:root.dark .page-benutzer-bearbeiten .checkbox-group label { background: var(--dark-surface-2); border-color: var(--dark-border); color: var(--dark-text-muted); }
:root.dark .page-benutzer-bearbeiten .checkbox-group label:hover { border-color: var(--primary-500); background: var(--dark-surface-3); }
/* Bearbeiten: Kennwort-Status */
.page-benutzer-bearbeiten .kw-status {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-size: 0.72rem; padding: 0.3rem 0.6rem; border-radius: var(--radius-full);
}
.page-benutzer-bearbeiten .kw-expired {
    background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.15);
}
.page-benutzer-bearbeiten .kw-expired span { color: var(--error); font-weight: 500; }
.page-benutzer-bearbeiten .kw-expired span i { font-size: 0.65rem; }
.page-benutzer-bearbeiten .kw-expired button {
    background: none; border: 1px solid rgba(239,68,68,0.2); color: var(--error);
    font-size: 0.65rem; padding: 0.2rem 0.5rem; border-radius: var(--radius-full);
    cursor: pointer; font-weight: 500; transition: all var(--transition);
}
.page-benutzer-bearbeiten .kw-expired button:hover { background: rgba(239,68,68,0.08); }
.page-benutzer-bearbeiten .kw-action-btn {
    background: none; border: 1px solid var(--gray-200); color: var(--gray-500);
    font-size: 0.68rem; padding: 0.25rem 0.6rem; border-radius: var(--radius-full);
    cursor: pointer; font-weight: 500; transition: all var(--transition);
}
.page-benutzer-bearbeiten .kw-action-btn:hover { border-color: var(--error); color: var(--error); background: rgba(239,68,68,0.04); }

:root.dark .page-benutzer-bearbeiten .kw-expired { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); }
:root.dark .page-benutzer-bearbeiten .kw-action-btn { border-color: var(--dark-border); color: var(--dark-text-dim); }

:root.dark .page-benutzer-bearbeiten .status-section { border-top-color: var(--dark-border); }
:root.dark .page-benutzer-bearbeiten .status-option { background: var(--dark-surface-2); border-color: var(--dark-border); }
:root.dark .page-benutzer-bearbeiten .status-option span { color: var(--dark-text-dim); }
:root.dark .page-benutzer-bearbeiten .status-option:hover { background: var(--dark-surface-3); }
:root.dark .page-benutzer-bearbeiten .status-active:has(input:checked) { background: var(--success); border-color: var(--success); }
:root.dark .page-benutzer-bearbeiten .status-active:has(input:checked) span { color: white; }
:root.dark .page-benutzer-bearbeiten .status-inactive:has(input:checked) { background: var(--error); border-color: var(--error); }
:root.dark .page-benutzer-bearbeiten .status-inactive:has(input:checked) span { color: white; }
:root.dark .page-benutzer-bearbeiten .predefined-skill-btn.added { background: rgba(34,197,94,0.1); border-color: var(--success); color: var(--success); }

@media (max-width: 768px) {
    .page-benutzer-anlegen .form-card,
    .page-benutzer-bearbeiten .form-card { padding: 1rem; }
    .page-benutzer-anlegen .form-grid,
    .page-benutzer-bearbeiten .form-grid { grid-template-columns: 1fr; }
    .page-benutzer-anlegen .form-group.full-width,
    .page-benutzer-bearbeiten .form-group.full-width { grid-column: span 1; }
    .page-benutzer-anlegen .form-actions,
    .page-benutzer-bearbeiten .form-actions { flex-direction: column; }
    .page-benutzer-anlegen .form-actions .btn,
    .page-benutzer-bearbeiten .form-actions .btn { width: 100%; }
    .page-benutzer-bearbeiten .bef-row { grid-template-columns: 1fr; }
    .page-benutzer-bearbeiten .befaehigung-add { grid-template-columns: 1fr; }
    .page-benutzer-bearbeiten .predefined-skills-grid { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   Crosscheck Page
   ============================================================ */

/* ── Layout Overrides ─────────────────────────────────────── */
.page-crosscheck .container {
    max-width: 1700px;
    padding: 0 3rem;
}

.page-crosscheck .hero {
    padding: 1.25rem 0 1rem;
}

.page-crosscheck .hero h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.page-crosscheck .hero p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    max-width: 900px;
}

/* ── Compliance Score ─────────────────────────────────────── */
.page-crosscheck .compliance-score {
    background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-lg);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0.75rem auto;
    max-width: 600px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.page-crosscheck .compliance-score.warning {
    background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%);
}

.page-crosscheck .compliance-score.error {
    background: linear-gradient(135deg, var(--error) 0%, #dc2626 100%);
}

/* ── Banners ──────────────────────────────────────────────── */
.page-crosscheck .teamleiter-banner {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    padding: 0.75rem;
    margin: 0.75rem 0;
    text-align: center;
    font-weight: 600;
    color: #1d4ed8;
    font-size: 0.78rem;
}

.page-crosscheck .db-info-banner {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: var(--radius);
    padding: 0.75rem;
    margin: 0.75rem 0;
    text-align: center;
    font-weight: 600;
    color: #047857;
    font-size: 0.78rem;
}

/* ── KW Nav Overrides ─────────────────────────────────────── */
.page-crosscheck .kw-nav {
    margin-bottom: 1rem;
}

/* ── Stats Grid Overrides ─────────────────────────────────── */
.page-crosscheck .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.page-crosscheck .stat-card {
    padding: 0.75rem;
    text-align: center;
    display: block;
}

.page-crosscheck .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.page-crosscheck .stat-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    font-size: 0.8rem;
}

.page-crosscheck .stat-icon.success { background: #d1fae5; color: var(--success); }
.page-crosscheck .stat-icon.warning { background: #fef3c7; color: var(--warning); }
.page-crosscheck .stat-icon.error { background: #fee2e2; color: var(--error); }
.page-crosscheck .stat-icon.info { background: #dbeafe; color: var(--info); }
.page-crosscheck .stat-icon.special { background: #ede9fe; color: var(--special); }
.page-crosscheck .stat-icon.secondary { background: var(--gray-100); color: var(--gray-600); }

.page-crosscheck .stat-value {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.page-crosscheck .stat-label {
    font-size: 0.75rem;
}

.page-crosscheck .stat-percentage {
    font-size: 0.7rem;
    margin-top: 0.25rem;
    font-weight: 600;
}

.page-crosscheck .stat-percentage.good { color: var(--success); }
.page-crosscheck .stat-percentage.medium { color: var(--warning); }
.page-crosscheck .stat-percentage.bad { color: var(--error); }

/* ── Filter Section ───────────────────────────────────────── */
.page-crosscheck .filter-box {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
    margin-bottom: 1rem;
}

.page-crosscheck .filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.page-crosscheck .filter-item {
    display: flex;
    flex-direction: column;
}

.page-crosscheck .filter-item label {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--gray-700);
    margin-bottom: 0.25rem;
}

.page-crosscheck .filter-item input[type="text"] {
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.5rem 0.65rem;
    font-size: 0.78rem;
    background: white;
    transition: all 0.2s ease;
    font-family: inherit;
}

.page-crosscheck .filter-item input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-50);
}

/* ── Table Overrides ──────────────────────────────────────── */
.page-crosscheck .table-wrapper {
    margin-bottom: 1rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    position: relative;
}

.page-crosscheck .data-table {
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
    margin-bottom: 1rem;
    table-layout: fixed;
    min-width: 800px;
    font-size: 0.72rem;
}

.page-crosscheck .data-table thead {
    position: sticky;
    top: 112px;
    z-index: 100;
}
.page-crosscheck.has-ticker .data-table thead {
    top: 144px;
}

.page-crosscheck .data-table th,
.page-crosscheck .data-table td {
    padding: 0.3rem 0.4rem;
    text-align: center;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.72rem;
    word-wrap: break-word;
    overflow: visible;
    vertical-align: middle;
}

.page-crosscheck .data-table th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 2px solid var(--gray-300);
    white-space: nowrap;
    position: sticky;
    top: 102px;
    z-index: 100;
}

.page-crosscheck .data-table tbody tr:hover {
    background: var(--gray-25);
}

.page-crosscheck .techname {
    text-align: left;
    font-weight: 600;
    color: var(--gray-900);
    padding-left: 0.75rem;
    width: 150px;
    min-width: 150px;
    font-size: 0.72rem;
}

@media (min-width: 769px) {
    .page-crosscheck .data-table th:not(.techname),
    .page-crosscheck .data-table td:not(.techname) {
        width: calc((100% - 150px) / 7);
        min-width: 90px;
    }
}

/* ── Status Cells ─────────────────────────────────────────── */
.status-cell {
    border-radius: var(--radius-sm, 6px);
    font-size: 0.68rem;
    padding: 0.3rem 0.25rem;
    font-weight: 600;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.25rem;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.status-cell.both {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.status-cell.only-reports {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.status-cell.only-reports.lila {
    background: #f5f3ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}

.status-cell.only-uploads {
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
}

.status-cell.missing {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.status-cell.not-planned {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.status-cell.weekend {
    background: var(--gray-50);
    color: var(--gray-400);
    border: 1px solid var(--gray-200);
}

.status-cell.revenue-unplanned {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.status-cell.revenue-unplanned .status-details {
    color: #b45309;
}

.status-cell.no-data {
    background: #f5f3ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}

.page-crosscheck .status-icon {
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
    margin-right: 0;
    display: block;
    text-align: center;
}

.page-crosscheck .status-text {
    font-size: 0.62rem;
    line-height: 1.2;
    text-align: center;
}

.page-crosscheck .status-details {
    font-size: 0.65rem;
    opacity: 0.8;
    margin-top: 0.25rem;
    text-align: center;
}

/* ── Placeholder Status Variants ──────────────────────────── */
.status-cell.placeholder-urlaub {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-style: italic;
}

.status-cell.placeholder-krank {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    font-style: italic;
}

.status-cell.placeholder-schulung {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #c4b5fd;
    font-style: italic;
}

.status-cell.placeholder-homeoffice {
    background: #f5f3ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
    font-style: italic;
}

.status-cell.placeholder-feiertag {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
    font-style: italic;
}

.status-cell.placeholder-gleittag {
    background: #faf5ff;
    color: #9333ea;
    border: 1px solid #e9d5ff;
    font-style: italic;
}

.status-cell.placeholder-termin {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
    font-style: italic;
}

.status-cell.placeholder-einfuehrung {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    font-style: italic;
}

.status-cell.placeholder-ausgleichstag {
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
    font-style: italic;
}

.status-cell.placeholder-frei {
    background: #fefce8;
    color: #a16207;
    border: 1px solid #fde68a;
    font-style: italic;
}

.status-cell.placeholder-default {
    background: var(--gray-50);
    color: var(--gray-500);
    font-style: italic;
    border: 1px solid var(--gray-200);
}

/* ── Context Menu ─────────────────────────────────────────── */
.page-crosscheck .context-menu {
    position: fixed;
    z-index: 10000;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 0.25rem 0;
    min-width: 200px;
    display: none;
}
.page-crosscheck .context-menu.show { display: block; }
.page-crosscheck .context-menu-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.page-crosscheck .context-menu-item:hover {
    background: var(--gray-100);
}
.page-crosscheck .day-cell { cursor: context-menu; }

/* ── Modal (Heute keine Daten) ────────────────────────────── */
.page-crosscheck .modal-overlay .modal {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1rem;
    max-width: 420px;
    width: 90%;
    box-shadow: var(--shadow-xl);
}
.page-crosscheck .modal-overlay .modal h4 { margin-bottom: 0.75rem; color: var(--gray-900); font-size: 0.95rem; }
.page-crosscheck .modal-overlay .modal label { display: block; font-weight: 600; font-size: 0.75rem; margin-bottom: 0.35rem; color: var(--gray-700); }
.page-crosscheck .modal-overlay .modal input[type="date"],
.page-crosscheck .modal-overlay .modal select { width: 100%; padding: 0.5rem 0.65rem; border: 2px solid var(--gray-200); border-radius: var(--radius); margin-bottom: 0.75rem; font-size: 0.78rem; }
.page-crosscheck .modal-overlay .modal .buttons { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.page-crosscheck .modal-overlay .modal .cancel { background: var(--gray-200); color: var(--gray-700); border: none; padding: 0.5rem 0.85rem; border-radius: var(--radius); cursor: pointer; font-weight: 500; font-size: 0.78rem; }
.page-crosscheck .modal-overlay .modal .submit { background: #8b5cf6; color: #fff; border: none; padding: 0.5rem 0.85rem; border-radius: var(--radius); cursor: pointer; font-weight: 500; font-size: 0.78rem; }
.page-crosscheck .modal-overlay .modal .readonly-info { background: var(--gray-50); padding: 0.5rem 0.75rem; border-radius: var(--radius); margin-bottom: 0.75rem; font-size: 0.78rem; }

/* ── Tooltip ──────────────────────────────────────────────── */
.page-crosscheck .tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 100;
    margin-bottom: 0.5rem;
}

.page-crosscheck .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
}

/* ── Crosscheck Responsive ────────────────────────────────── */
@media (max-width: 1024px) {
    .page-crosscheck .filter-grid {
        grid-template-columns: 1fr;
    }
    .page-crosscheck .kw-nav {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .page-crosscheck .container {
        padding: 0 0.75rem;
    }
    .page-crosscheck .hero h1 {
        font-size: 1.3rem;
    }
    .page-crosscheck .hero p {
        font-size: 0.78rem;
    }
    .page-crosscheck .filter-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
    }
    .page-crosscheck .filter-item label {
        font-size: 0.7rem;
    }
    .page-crosscheck .filter-item input[type="text"] {
        font-size: 14px;
        min-height: 38px;
        padding: 0.5rem 0.6rem;
    }
    .page-crosscheck .kw-nav a,
    .page-crosscheck .sort-link {
        min-height: 38px;
        font-size: 0.8rem;
        display: inline-flex;
        align-items: center;
    }
    .page-crosscheck .data-table {
        min-width: 600px;
    }
    .page-crosscheck .data-table th,
    .page-crosscheck .data-table td {
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
    }
    .page-crosscheck .techname {
        padding-left: 0.75rem;
        width: 150px;
        min-width: 150px;
    }
    .page-crosscheck .status-cell {
        min-height: 50px;
        padding: 0.5rem 0.25rem;
    }
    .page-crosscheck .status-text {
        font-size: 0.65rem;
    }
    .page-crosscheck .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .page-crosscheck .stat-card {
        padding: 0.6rem;
    }
    .page-crosscheck .stat-icon {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
    .page-crosscheck .stat-value {
        font-size: 0.9rem;
    }
    .page-crosscheck .stat-label {
        font-size: 0.65rem;
    }
    .page-crosscheck .data-table th:not(.techname),
    .page-crosscheck .data-table td:not(.techname) {
        width: calc((100% - 150px) / 7);
        min-width: 60px;
    }
}

@media (max-width: 480px) {
    .page-crosscheck .data-table {
        font-size: 0.7rem;
        min-width: 500px;
    }
    .page-crosscheck .techname {
        width: 120px;
        min-width: 120px;
        font-size: 0.75rem;
    }
    .page-crosscheck .data-table th:not(.techname),
    .page-crosscheck .data-table td:not(.techname) {
        width: calc((100% - 120px) / 7);
        min-width: 50px;
    }
    .page-crosscheck .status-cell {
        min-height: 45px;
        padding: 0.25rem;
    }
}

/* ── Crosscheck Dark Mode ─────────────────────────────────── */
:root.dark .page-crosscheck .stat-card { background: #1a1a2e; border-color: #2a2a4a; color: #e5e7eb; }
:root.dark .page-crosscheck .stat-value { color: #f3f4f6; }
:root.dark .page-crosscheck .stat-label { color: #9ca3af; }
:root.dark .page-crosscheck .filter-box { background: #1a1a2e; border-color: #2a2a4a; }
:root.dark .page-crosscheck .filter-item label { color: #d1d5db; }
:root.dark .page-crosscheck .filter-item input[type="text"] { background: #222240; border-color: #3a3a5a; color: #e5e7eb; }
:root.dark .page-crosscheck .sort-link { background: #222240; color: #e5e7eb; border-color: #3a3a5a; }
:root.dark .page-crosscheck .sort-link:hover { background: #2a2a4a; }
:root.dark .page-crosscheck .data-table { background: #1a1a2e; border-color: #2a2a4a; }
:root.dark .page-crosscheck .data-table th { background: #222240; color: #d1d5db; border-bottom-color: #3a3a5a; }
:root.dark .page-crosscheck .data-table td { border-bottom-color: #2a2a4a; }
:root.dark .page-crosscheck .data-table tbody tr:hover { background: #222240; }
:root.dark .page-crosscheck .techname { color: #f3f4f6; }
:root.dark .page-crosscheck .kw-nav strong { color: #f3f4f6; }
:root.dark .page-crosscheck .table-wrapper { box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
:root.dark .page-crosscheck .teamleiter-banner { background: linear-gradient(135deg, #1e2a4a 0%, #1a2240 100%); border-color: #3b82f6; color: #93c5fd; }
:root.dark .page-crosscheck .db-info-banner { background: linear-gradient(135deg, #0a2a1a 0%, #0d3320 100%); border-color: #10b981; color: #6ee7b7; }
:root.dark .page-crosscheck .compliance-score { box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
:root.dark .page-crosscheck .context-menu { background: #1a1a2e; border-color: #2a2a4a; }
:root.dark .page-crosscheck .context-menu-item { color: #e5e7eb; }
:root.dark .page-crosscheck .context-menu-item:hover { background: #222240; }
:root.dark .page-crosscheck .modal-overlay .modal { background: #1a1a2e; color: #e5e7eb; }
:root.dark .page-crosscheck .modal-overlay .modal h4 { color: #f3f4f6; }
:root.dark .page-crosscheck .modal-overlay .modal label { color: #d1d5db; }
:root.dark .page-crosscheck .modal-overlay .modal input[type="date"],
:root.dark .page-crosscheck .modal-overlay .modal select { background: #222240; border-color: #3a3a5a; color: #e5e7eb; }
:root.dark .page-crosscheck .modal-overlay .modal .cancel { background: #222240; color: #e5e7eb; }
:root.dark .page-crosscheck .modal-overlay .modal .readonly-info { background: #222240; color: #e5e7eb; }
:root.dark .page-crosscheck .tooltip { background: rgba(0,0,0,0.95); }
:root.dark .page-crosscheck .stat-icon.success { background: rgba(16,185,129,0.15); }
:root.dark .page-crosscheck .stat-icon.warning { background: rgba(226,137,19,0.15); }
:root.dark .page-crosscheck .stat-icon.error { background: rgba(239,68,68,0.15); }
:root.dark .page-crosscheck .stat-icon.info { background: rgba(37,99,235,0.15); }
:root.dark .page-crosscheck .stat-icon.special { background: rgba(139,92,246,0.15); }
:root.dark .page-crosscheck .stat-icon.secondary { background: #222240; color: #9ca3af; }
:root.dark .status-cell.not-planned { background: #1a1a2e; color: #6b7280; border-color: #2a2a4a; }
:root.dark .status-cell.placeholder-default { background: #222240; color: #9ca3af; border-color: #3a3a5a; }

/* Dark Mode - Inline style overrides for crosscheck */
:root.dark .page-crosscheck [style*="background: white"] { background: #222240 !important; border-color: #2a2a4a !important; color: #e5e7eb !important; }
:root.dark .page-crosscheck [style*="background: var(--gray-50)"] { background: #1a1a2e !important; border-color: #2a2a4a !important; }
:root.dark .page-crosscheck [style*="background: var(--primary-50)"] { background: #222240 !important; }
:root.dark .page-crosscheck [style*="background: #fee2e2"] { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; }
:root.dark .page-crosscheck [style*="background: #fef3c7"] { background: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; }
:root.dark .page-crosscheck [style*="background: #f0f9ff"] { background: #222240 !important; }
:root.dark .page-crosscheck [style*="background: #f8fafc"] { background: #1e1e38 !important; }
:root.dark .page-crosscheck [style*="background: #fff3cd"] { background: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; border-color: #3a3a5a !important; }