/* =======================================================
   1) ROOT DESIGN SYSTEM (Design Tokens)
======================================================= */

:root {
    /* Layout */
    --container-max: 1400px;

    /* Spacing (kompakt & harmonisch) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;

    /* Radius */
    --radius-s: 6px;
    --radius-m: 8px;
    --radius-l: 12px;

    /* Shadows (modern, weich) */
    --shadow-card: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-header: 0 2px 6px rgba(0,0,0,0.06);

    /* Farben (Light Mode – Indigo Theme) */
    --color-bg: #F7F7F8;
    --color-bg-soft: #FFFFFF;
    --color-bg-hover: #F0F0F0;
    --color-border: #E2E2E2;
    --color-text: #1A1A1A;
    --color-muted: #6A6A6A;

    /* Brand Indigo */
    --color-brand: #4F46E5;
}

/* Dark Mode */
:root.dark {
    --color-bg: #111111;
    --color-bg-soft: #1A1A1A;
    --color-bg-hover: #222222;
    --color-border: #333333;
    --color-text: #EDEDED;
    --color-muted: #A0A0A0;

    /* Brand Indigo (Dark) */
    --color-brand: #818CF8;
}

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

/* Icon-Toggle für Darkmode */
.icon-dark { display: none; }
.dark .icon-light { display: none; }
.dark .icon-dark { display: inline; }

:root.dark th {
    background: #222; /* perfekt abgestimmt */
}
:root.dark th {
    color: #F5F5F5; /* heller Text für perfekten Kontrast */
}
:root.dark th .th-inner i[data-lucide] {
    color: #F5F5F5;
    opacity: 0.8;
}
:root.dark th:hover {
    background: #2A2A2A;
}
:root.dark .sum-row {
    background: #1A1A1A;
    color: #F5F5F5;
}


/* =======================================================
   2) GLOBAL RESET / TYPO / LAYOUT
======================================================= */

body {
    font-family: "Inter", sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.4;
    margin: 0;
    padding-bottom: 20px;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-3);
}

h1, h2, h3 {
    margin: var(--space-2) 0;
    font-weight: 600;
}


/* =======================================================
   3) HEADER / NAVBAR
======================================================= */

.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(245, 245, 245, 0.9); /* hell, elegant */
    backdrop-filter: blur(8px);

    box-shadow: var(--shadow-header);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) 0;
}

:root.dark .main-header {
    background: rgba(20, 20, 20, 0.9);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    height: 48px;
    opacity: 0.9;
}

/* Icons rechts */
.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.icon-btn {
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.icon-btn:hover {
    opacity: 1;
}


/* =======================================================
   3b) STABILES, EDLERES DROPDOWN-MENÜ
======================================================= */

.menu-dropdown {
    position: relative;
    display: inline-block;
}

/* Trigger */
.menu-trigger {
    padding: 8px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Dropdown */
.dropdown-content {
    position: absolute;
    top: 100%;                 /* direkt unter dem Trigger, kein Gap */
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    padding: 0;
    min-width: 160px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 2000;
}

/* Offen, solange entweder Trigger-Container ODER Dropdown selbst gehovert wird */
.menu-dropdown:hover .dropdown-content,
.dropdown-content:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%); /* kein zusätzliches Y-Offset */
}

/* Links im Dropdown */
.dropdown-content a {
    display: block;
    padding: var(--space-2) var(--space-3);
    text-decoration: none;
    color: var(--color-text);
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
}

.dropdown-content a:last-child {
    border-bottom: none;
}

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


/* =======================================================
   4) FORMS (Inputs, Selects, Filter)
======================================================= */

input,
select {
    padding: var(--space-2);
    border-radius: var(--radius-s);
    border: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    color: var(--color-text);
    font-size: 0.9rem;
}

input:focus,
select:focus {
    outline: 2px solid var(--color-brand);
    outline-offset: 1px;
}

/* Filter-Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(160px, 1fr));
    gap: var(--space-3);
}

.grid > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}


.grid input,
.grid select {
    height: 2.2rem;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(140px, 1fr));
    gap: var(--space-3);
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}


/* =======================================================
   5) BUTTONS
======================================================= */

button,
.btn {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-s);
    border: none;
    background: var(--color-brand);
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    transition: background 0.2s, transform 0.1s;
}

button:hover,
.btn:hover {
    background: #4338CA; /* etwas dunkleres Indigo */
}

button:active,
.btn:active {
    transform: translateY(1px);
}

/* =======================================================
   ACTION BAR (Button rechts oben)
======================================================= */

.action-bar {
    margin-top: var(--space-4);
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}


/* Primärer Button */
.btn-primary {
    background: var(--color-brand);
    color: white;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-s);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: var(--shadow-card);
    transition: background 0.2s, transform 0.1s;
}

.btn-primary:hover {
    background: #4338CA; /* dunkleres Indigo */
}

.btn-primary:active {
    transform: translateY(1px);
}

.btn-primary i[data-lucide] {
    width: 18px;
    height: 18px;
}

.btn-primary svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-block; /* überschreibt normalize */
    max-width: none;       /* überschreibt normalize */
}

/* =======================================================
   6) TABLES (Clean, No Zebra, Dark-Mode Compatible)
======================================================= */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

/* Standard-Ausrichtung */
th,
td {
    text-align: center;
    min-width: 70px;
}

/* Links ausgerichtete Spalten */
th.left,
td.left {
    text-align: left;
}

/* Rechts ausgerichtete Spalten */
th.right,
td.right {
    text-align: right;
}

/* -------------------------------------------------------
   HEADER
------------------------------------------------------- */

/* Light Mode Header */
th {
    padding: var(--space-2);
    border-bottom: 2px solid var(--color-border);
    background: #E0E0E0; /* Light Mode Header */
    font-weight: 600;
    white-space: nowrap;
}

/* Dark Mode Header */
:root.dark th {
    background: #222;
    color: #F5F5F5;
}

/* Sortier-Wrapper */
.th-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-1);
}

/* Sortier-Icons */
.th-inner i[data-lucide] {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 1px;
    flex-shrink: 0;
}

th:hover .th-inner i[data-lucide] {
    opacity: 1;
}

/* -------------------------------------------------------
   BODY
------------------------------------------------------- */

/* Light Mode Body */
td {
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    color: var(--color-text);
}

/* Dark Mode Body */
:root.dark td {
    background: var(--color-bg); /* wichtig */
    color: var(--color-text);
}

/* Hover */
tbody tr:hover {
    background: var(--color-bg-hover);
    transition: background 0.15s ease-in-out;
    cursor: pointer;
}

/* -------------------------------------------------------
   SUMMENZEILE
------------------------------------------------------- */

.sum-row {
    background: var(--color-bg-soft);
    font-weight: 600;
}

.sum-row th {
    border-bottom: 2px solid var(--color-border);
}

:root.dark .sum-row {
    background: #1A1A1A;
    color: var(--color-text);
}

/* -------------------------------------------------------
   SPALTENBREITEN
------------------------------------------------------- */

th.left:nth-child(1),
td.left:nth-child(1) {
    min-width: 100px;
}

th.left:nth-child(2),
td.left:nth-child(2) {
    min-width: 180px;
}

th.left:nth-child(3),
td.left:nth-child(3) {
    min-width: 160px;
}

td.center,
th.center {
    min-width: 50px;
}

td:last-child,
th:last-child {
    min-width: 60px;
}

/* -------------------------------------------------------
   WRAPPER
------------------------------------------------------- */

/* Light Mode Wrapper */
.table-wrapper {
    background: var(--color-bg-soft);
    padding: var(--space-3) var(--space-3) var(--space-4);
    border-radius: var(--radius-m);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.06),
        0 8px 24px rgba(0,0,0,0.12);
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
    overflow: hidden;
}

/* Dark Mode Wrapper */
:root.dark .table-wrapper {
    background: var(--color-bg); /* wichtig */
}



/* =======================================================
   7) CARDS
======================================================= */
.detail-card {
    background: var(--color-bg);
    padding: var(--space-4);
    border-radius: var(--radius-l);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: var(--space-4);
}

.card {
    background: var(--color-bg-soft);
    padding: var(--space-4);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
}

.detail-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

.card-section {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    background: var(--color-bg-soft);
}

.card-section.full {
    grid-column: 1 / -1;
}

.card-section h4 {
    margin-bottom: var(--space-3);
    font-size: 1rem;
    opacity: 0.8;
}

.section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
}

.section-grid > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.section-grid input[readonly] {
    background: var(--color-bg-soft);
    opacity: 0.7;
}

.section-grid.three-cols {
    display: grid;
    grid-template-columns: 1fr 2.5fr 1fr; /* Kdnr | Firmenname | Status */
    gap: var(--space-3);
}

.section-grid.three-cols .wide input {
    width: 100%;
}

.card-section h4 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1rem;
    opacity: 0.85;
}

.card-section h4 i {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
    opacity: 0.9;
}


/* =======================================================
   8) PAGING
======================================================= */

.paging button {
    padding: var(--space-1) var(--space-3);
    font-size: 0.85rem;
    border-radius: var(--radius-s);
    background: var(--color-brand);
    color: white;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.paging button:hover {
    background: #4338CA;
}

/* Deaktivierter Zustand */
.paging button.disabled,
.paging button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--color-border);
    color: var(--color-muted);
    pointer-events: none;
}

/* =======================================================
   PAGE HEADER (Titel + Button rechts)
======================================================= */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-3);
}

.page-header h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.page-header .btn-primary {
    position: relative;
    top: 4px; /* Button optisch nach unten ziehen */
}

/* =======================================================
   FLASH Message
======================================================= */

.flash {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-s);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    transition: opacity 0.3s ease;
    box-shadow: var(--shadow-card);
}

.flash-success {
    background: #d1fae5;
    color: #065f46;
}

:root.dark .flash-success {
    background: #064e3b;
    color: #d1fae5;
}

.flash i[data-lucide] {
    width: 18px;
    height: 18px;
}

/* =======================================================
   Tabs
======================================================= */

.tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.tab {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-s);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    opacity: 0.7;
    transition: 0.15s ease;
}

.tab:hover {
    opacity: 1;
}

.tab.active {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: white;
    opacity: 1;
}


/* =======================================================
   Module Groups
======================================================= */

.module-group {
    margin-bottom: var(--space-5);
}

.module-group h3 {
    margin-bottom: var(--space-3);
    font-size: 1.1rem;
    opacity: 0.8;
}

.module-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

/* =======================================================
   Modul-Card
======================================================= */

.module-item {
    padding: var(--space-3);
    border-radius: var(--radius-m);
    border: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.module-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.module-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

/* Datum-Grid */
.module-dates {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-2);
}

/* Aktiv-Hervorhebung */
.module-item:has(input[type="checkbox"]:checked) {
    background: var(--color-brand-soft);
    border-color: var(--color-brand);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.module-item:has(input[type="checkbox"]:checked) strong {
    color: var(--color-brand);
}

/* =======================================================
   Switch-Styling (Modul + Filter)
======================================================= */

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.active-filter {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.85rem;
    opacity: 0.8;
    cursor: pointer;
}

.active-filter input[type="checkbox"] {
    appearance: none;
    width: 40px;
    height: 22px;
    background: var(--color-border);
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
}

.active-filter input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.active-filter input[type="checkbox"]:checked {
    background: var(--color-brand);
}

.active-filter input[type="checkbox"]:checked::after {
    transform: translateX(18px);
}



/* =======================================================
   Sichtbarkeitslogik (Modul aktiv / Faktura / BestNr)
   Checkbox + Dropdown (korrekt)
======================================================= */

/* Standard: alles verstecken */
.module-faktura,
.module-bestnr,
.module-dates {
    display: none;
}

/* =======================================================
   A) Modul aktiv → Faktura anzeigen
======================================================= */

/* Checkbox aktiv */
.module-item:has(input[type="checkbox"]:checked) .module-faktura,
/* Dropdown aktiv (value != 0) */
.module-item:has(select:not([name$="_faktstatus"]) option:checked:not([value="0"])) .module-faktura {
    display: flex;
}

/* =======================================================
   B) Modul aktiv → Datum anzeigen
======================================================= */

.module-item:has(input[type="checkbox"]:checked) .module-dates,
.module-item:has(select:not([name$="_faktstatus"]) option:checked:not([value="0"])) .module-dates {
    display: grid;
}

/* =======================================================
   C) Bestellnummer anzeigen, wenn:
   - Modul aktiv
   - Faktura = offen (0)
======================================================= */

.module-item:has(input[type="checkbox"]:checked):has(select[name$="_faktstatus"] option:checked[value="0"]) .module-bestnr,
.module-item:has(select:not([name$="_faktstatus"]) option:checked:not([value="0"])):has(select[name$="_faktstatus"] option:checked[value="0"]) .module-bestnr {
    display: block;
}

/* =======================================================
   Layout-Anpassungen
======================================================= */

.module-faktura {
    justify-content: flex-end;
    gap: var(--space-2);
    align-items: center;
}

.module-bestnr input[type="text"] {
    width: 80%;
}

.module-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* =======================================================
   Globaler Toggle-Switch für alle Modul-Checkboxen
======================================================= */

.toggle-switch {
    appearance: none;
    width: 40px;
    height: 22px;
    background: var(--color-border);
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.toggle-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.toggle-switch:checked {
    background: var(--color-brand);
}

.toggle-switch:checked::after {
    transform: translateX(18px);
}

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

.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: var(--color-bg-soft);
    font-family: Inter, sans-serif;
}

.login-card {
    width: 340px;
    padding: var(--space-4);
    border-radius: var(--radius-m);
    background: white;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.login-card h2 {
    margin: 0;
    text-align: center;
    font-size: 1.4rem;
    opacity: 0.85;
}

.login-card label {
    font-size: 0.9rem;
    opacity: 0.8;
}

.login-card input {
    width: 100%;
    padding: var(--space-2);
    border-radius: var(--radius-s);
    border: 1px solid var(--color-border);
}

.login-card button {
    width: 100%;
    padding: var(--space-2);
    border: none;
    border-radius: var(--radius-s);
    background: var(--color-brand);
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.login-card .error {
    background: #ffdddd;
    border: 1px solid #ffaaaa;
    padding: var(--space-2);
    border-radius: var(--radius-s);
    color: #a00;
    font-size: 0.85rem;
}