/* Produkt-Sync Tool - Stylesheet */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f0f2f5;
    color: #333;
    font-size: 14px;
}

/* Layout */
.wrapper {
    display: flex;
    min-height: 100vh;
}

/* Hamburger Button */
.hamburger {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1100;
    background: #1a1a2e;
    border: none;
    border-radius: 6px;
    padding: 10px;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s;
}

.hamburger.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.open span:nth-child(2) {
    opacity: 0;
}
.hamburger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

/* Sidebar */
.sidebar {
    width: 220px;
    background: #1a1a2e;
    color: #fff;
    padding: 20px 0;
    position: fixed;
    height: 100vh;
    overflow: hidden;
    z-index: 1000;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 0 20px 20px;
    border-bottom: 1px solid #2a2a4a;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
}

.sidebar-header small {
    display: block;
    font-size: 11px;
    color: #888;
    font-weight: normal;
    margin-top: 4px;
}

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

.sidebar nav a {
    display: block;
    padding: 8px 20px;
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
    border-left: 3px solid transparent;
    transition: background 0.2s, border-color 0.2s;
}

.sidebar nav a:hover,
.sidebar nav a.active {
    background: #16213e;
    color: #fff;
    border-left-color: #4f7cff;
}

.nav-label {
    display: block;
    padding: 14px 20px 4px;
    font-size: 11px;
    color: #6c6c8a;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-sub {
    padding-left: 30px !important;
}

/* Aufklappbare Menügruppen */
.sidebar nav details.nav-group > summary.nav-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    padding: 11px 20px 11px 20px;
    user-select: none;
    list-style: none;
    transition: background 0.15s, color 0.15s;
}
.sidebar nav details.nav-group > summary.nav-label::-webkit-details-marker { display: none; }
.sidebar nav details.nav-group > summary.nav-label:hover { background: #16213e; color: #a9a9c8; }
.sidebar nav details.nav-group > summary.nav-label.has-active { color: #8f9dd0; }
.nav-chevron {
    font-size: 15px;
    line-height: 1;
    transition: transform 0.18s ease;
    opacity: 0.7;
}
details.nav-group[open] > summary .nav-chevron { transform: rotate(90deg); }
.nav-group + .nav-group { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.nav-fixed .nav-label { padding-bottom: 4px; }

/* Dritte Ebene im Menü (Finanzen -> Sonstiges). Eine Stufe weiter eingerückt als die
   zweite, damit auf einen Blick klar ist, dass es darunter liegt. */
.sidebar nav details.nav-unter > summary.nav-unter-titel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.sidebar nav details.nav-unter > summary::-webkit-details-marker { display: none; }
.sidebar nav details.nav-unter > summary.has-active { color: #8f9dd0; }
.sidebar nav details.nav-unter[open] > summary .nav-chevron { transform: rotate(90deg); }
.sidebar nav .nav-sub2 { padding-left: 46px !important; font-size: 13px; }

/* Bereiche ohne Unterseiten: direkter Link statt Aufklapp-Block */
.sidebar nav .nav-direct .nav-top {
    display: block;
    padding: 11px 20px;
    color: #ccc;
    font-size: 14px;
    border-left: 3px solid transparent;
}
.sidebar nav .nav-direct .nav-top:hover,
.sidebar nav .nav-direct .nav-top.active {
    background: #16213e;
    color: #fff;
    border-left-color: #4f7cff;
}

.sidebar-footer {
    flex-shrink: 0;
    width: 100%;
    padding: 14px 20px;
    border-top: 1px solid #2a2a4a;
    background: #16162a;
}

.sidebar-footer a {
    color: #888;
    text-decoration: none;
    font-size: 12px;
}

/* Main Content */
/* Kopfleiste gibt es nur auf schmalen Schirmen – auf dem Desktop traegt die Seitenleiste alles. */
.mobile-topbar { display: none; }

.main {
    margin-left: 220px;
    padding: 30px;
    flex: 1;
    width: calc(100% - 220px);
    min-width: 0;          /* erlaubt Kindern zu schrumpfen statt die Seite zu sprengen */
}

.page-header {
    margin-bottom: 25px;
}

.page-header h1 {
    font-size: 22px;
    color: #1a1a2e;
}

.page-header p {
    color: #666;
    margin-top: 5px;
}

/* Cards */
.card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.card h2 {
    font-size: 16px;
    margin-bottom: 15px;
    color: #1a1a2e;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.stat-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.stat-card .label {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card .value {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a2e;
    margin-top: 5px;
}

/* Tabelle */
table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    text-align: left;
    padding: 10px 12px;
    background: #f8f9fa;
    font-size: 12px;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e9ecef;
}

table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

table tr:hover {
    background: #f8f9fa;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.badge-active { background: #d4edda; color: #155724; }
.badge-inactive { background: #f8d7da; color: #721c24; }
.badge-parent { background: #cce5ff; color: #004085; }
.badge-child { background: #e2e3e5; color: #383d41; }
.badge-single { background: #fff3cd; color: #856404; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s;
}

.btn:hover { opacity: 0.85; }

.btn-primary { background: #1a1a2e; color: #fff; }
.btn-success { background: #28a745; color: #fff; }
.btn-danger { background: #dc3545; color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-outline { background: transparent; border: 1px solid #ccc; color: #333; }

/* Forms */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 13px;
    color: #555;
}

.form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
    -webkit-appearance: none;
}

.form-control:focus {
    outline: none;
    border-color: #1a1a2e;
}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

/* Alerts */
.alert {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 14px;
}

.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-info { background: #cce5ff; color: #004085; border: 1px solid #b8daff; }
.alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }

/* Login Page */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #1a1a2e;
    padding: 20px;
}

.login-box {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    width: 360px;
    max-width: 100%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.login-box h1 {
    font-size: 20px;
    margin-bottom: 25px;
    text-align: center;
    color: #1a1a2e;
}

.login-box .btn {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
}

/* Pagination */
.pagination {
    display: flex;
    gap: 5px;
    margin-top: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.pagination a, .pagination span {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 13px;
}

.pagination span.current {
    background: #1a1a2e;
    color: #fff;
    border-color: #1a1a2e;
}

/* Suche */
.search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-bar input {
    flex: 1;
    min-width: 150px;
}

/* Changelog-Tabelle */
.field-name {
    font-family: 'Courier New', monospace;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

.old-value {
    color: #dc3545;
    text-decoration: line-through;
}

.new-value {
    color: #28a745;
    font-weight: 500;
}

/* =========================================================
   RESPONSIVE - Mobile
   ========================================================= */

@media (max-width: 768px) {
    /* Hamburger sichtbar */
    .hamburger {
        display: flex;
    }

    /* Sidebar versteckt, slideIn von links */
    .sidebar {
        transform: translateX(-100%);
    }

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

    .sidebar-overlay.open {
        display: block;
    }

    /* Main volle Breite */
    .main {
        margin-left: 0;
        width: 100%;
        padding: 68px 15px 15px;   /* Platz fuer die feste Kopfleiste */
        overflow-x: hidden;    /* kein horizontales Scrollen der ganzen Seite auf Mobile */
    }

    /* `repeat(auto-fit, minmax(340px, 1fr))` heisst „mindestens 340 Pixel je Spalte" – auch
       wenn der Bildschirm keine 340 mehr hergibt. Genau daran schob sich die Angebotsseite
       seitlich aus dem Bild (Franz, 18.09.2026). Auf dem Handy passt ohnehin nie mehr als eine
       solche Spalte nebeneinander, also wird daraus schlicht eine. */
    .main div[style*="auto-fit"] {
        grid-template-columns: 1fr !important;
    }

    /* Notbremse gegen seitliches Verschieben: Reicht ein einziges Element ueber den rechten
       Rand hinaus, laesst sich die ganze Seite wegziehen – und links verschwinden dann die
       Beschriftungen (Franz, 18.09.2026). `.main` hatte das schon, das Fenster selbst nicht. */
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
    .main > * {
        max-width: 100%;
    }

    /* iOS zoomt beim Antippen in JEDES Feld, dessen Schrift kleiner als 16px ist – danach
       steht die Seite schief und man muss von Hand zurueckzoomen (Franz, 18.09.2026). Das
       laesst sich nicht abschalten, ohne das Zoomen ganz zu verbieten (`maximum-scale`), was
       niemandem hilft, der wirklich vergroessern will. Die saubere Loesung ist genau diese:
       Auf schmalen Schirmen haben Eingabefelder 16px. `!important`, weil viele Felder ihre
       Groesse direkt im Element stehen haben. */
    input, select, textarea, .form-control {
        font-size: 16px !important;
    }

    /* Feste Kopfleiste (nur Handy). Sie traegt den Menueknopf, der vorher allein ueber dem
       Inhalt schwebte und beim Scrollen Tabellenzeilen verdeckte. */
    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 56px;
        padding: 0 14px 0 62px;    /* links Platz fuer den Menueknopf */
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        box-shadow: 0 1px 6px rgba(0,0,0,.06);
        z-index: 1050;             /* unter dem Menueknopf (1100), ueber dem Inhalt */
    }
    .mobile-topbar .mt-title {
        font-weight: 600;
        font-size: 15px;
        color: #1a1a2e;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mobile-topbar .mt-logout {
        flex: none;
        text-decoration: none;
        color: #4b5563;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        padding: 5px 10px;
        font-size: 15px;
        line-height: 1;
    }

    /* Page Header kleiner */
    .page-header h1 {
        font-size: 18px;
    }

    .page-header p {
        font-size: 12px;
    }

    /* Stats Grid 2 Spalten auf Mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-card {
        padding: 12px;
    }

    .stat-card .value {
        font-size: 20px;
    }

    /* Cards weniger Padding */
    .card {
        padding: 15px;
    }

    /* Tabellen horizontal scrollbar */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Tabellen, die auf dem Handy als Karten gelesen werden sollen.
       Seitlich scrollende Tabellen sind auf 400 Pixel Breite unbrauchbar: Von der
       Rechnungsnummer blieb „IER" stehen, Beträge lagen ausserhalb des Bildes
       (Franz, 19.09.2026). Jede Zeile wird deshalb zur Karte, die Spaltenüberschrift
       kommt je Zelle aus `data-label` – ohne das Attribut steht die Zeile ohne
       Beschriftung da, deshalb tragen alle Zellen dieser Tabellen eines. */
    table.om-table {
        display: block;
        overflow: visible;
        white-space: normal;
    }
    .om-table thead { display: none; }
    .om-table tbody, .om-table tr, .om-table td { display: block; }
    /* Diese drei Regeln sind staerker als das eingebaute `[hidden] { display:none }` des
       Browsers und wuerden versteckte Zeilen auf dem Handy AUFDECKEN. Genau das ist am
       20.09.2026 in der Buchhaltung passiert: die eingeklappten Einzelposten standen dort
       alle offen und schoben die Karten aus dem Bild. Deshalb hier ausdruecklich zurueck. */
    .om-table [hidden] { display: none !important; }
    .om-table tr {
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        padding: 10px 12px;
        margin: 0 0 10px;
        background: #fff;
    }
    .om-table td {
        border: none !important;
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 3px 0;
        text-align: left !important;
        white-space: normal;
    }
    /* Eine einzige zu breite Karte laesst die GANZE Liste seitlich scrollen – und dann
       wandern die Beschriftungen links aus dem Bild (Franz, 20.09.2026, Buchhaltung).
       Deshalb darf kein Inhalt die Karte aufziehen: lange Nummern und Adressen brechen um. */
    .om-table tr, .om-table td { max-width: 100%; }
    .om-table td { min-width: 0; overflow-wrap: anywhere; }
    .om-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #888;
        font-size: 12px;
        flex: 0 0 auto;
    }
    /* Leere Zellen (Balken) und reine Ordnungsnummern brauchen keine eigene Zeile */
    .om-table td:empty { display: none; }
    .om-table td.nur-desktop { display: none; }

    table th, table td {
        padding: 8px;
        font-size: 13px;
    }

    /* Buttons auf Mobile */
    .btn {
        padding: 10px 14px;
        font-size: 14px;
    }

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

    /* Search Bar untereinander */
    .search-bar {
        flex-direction: column;
    }

    .search-bar input {
        min-width: 100%;
    }

    /* Dashboard Kacheln */
    .main > div[style*="grid-template-columns: 1fr 1fr 1fr"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .main > div[style*="grid-template-columns:1fr 1fr 1fr"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    /* Forms nebeneinander → untereinander */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr"] {
        display: block !important;
    }

    div[style*="grid-template-columns: 1fr 1fr"] > *,
    div[style*="grid-template-columns:1fr 1fr"] > * {
        margin-bottom: 10px;
    }

    /* Flex-Layouts wrappen */
    div[style*="display:flex;gap"] {
        flex-wrap: wrap !important;
    }

    /* Login auf Mobile */
    .login-box {
        padding: 25px;
    }
}

/* Kleine Handys */
@media (max-width: 400px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .main {
        padding: 55px 10px 10px;
    }
}