/* ================================================= */
/* === 1. GRUNDSTYLING & LAYOUT (BODY, CONTAINER) === */
/* ================================================= */

:root {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
}

body {
    background: #f7f8fa;
    color: #111;
    margin: 0;
    padding: 20px;
}

/* WICHTIG: Spezielles Body-Styling für Login-Seite */
body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 0;
}

.container {
    width: 80vw;
    max-width: 1400px;
    margin: 20px auto;
    padding: 0 20px;
}

/* Kopfbereich / Toolbar (Search & Actions) */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.searchform input { padding: 6px 8px; }
.searchform button { padding: 6px 8px; }

/* ======================================= */
/* === 2. NAVIGATION (HEADER & DROPDOWN) === */
/* ======================================= */

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2c3e50;
    padding: 10px 20px;
    margin: -20px -20px 20px -20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.main-nav .menu-left, .main-nav .menu-right {
    display: flex;
    gap: 15px;
    align-items: center;
}
.main-nav a, .main-nav button {
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
    background: transparent;
    font-size: 0.95em;
    font-weight: 500;
}
.main-nav a:hover, .main-nav button:hover {
    background-color: #34495e;
}
.main-nav .linkbtn-primary {
    background-color: #2ecc71;
}

/* Dropdown-Menü CSS */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #34495e;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    border-radius: 4px;
    padding: 5px 0;
}
.dropdown-content a {
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    background-color: transparent;
}
.dropdown-content a:hover {
    background-color: #446484;
}
.dropdown:hover .dropdown-content {
    display: block;
}

/* ================================================= */
/* === 3. BUTTONS & AKTIONEN (GENERAL & TOPBAR) === */
/* ================================================= */

.actions button, .actions .linkbtn {
    margin-left: 8px;
    padding: 6px 8px;
    border: 0;
    background: #2b6cb0;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
}

.linkbtn {
    display: inline-block;
}

button, .linkbtn {
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover, .linkbtn:hover {
    background-color: #2c5282;
}

/* ================================================= */
/* === 4. TABELLEN-DESIGN (TABLE.MAIN) === */
/* ================================================= */

table.main {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

table.main thead {
    background: #e9ecef;
    color: #333;
    font-weight: 600;
}

table.main th, table.main td {
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

table.main th {
    border-bottom: 2px solid #d0d0d0;
}

table.main tbody tr:hover {
    background: #f1f5fb;
    transition: background 0.2s;
}

table.main th:first-child { border-top-left-radius: 6px; }
table.main th:last-child { border-top-right-radius: 6px; }

tr.warn { background: #fff0f0; }

/* Sortierlinks und statische Überschriften */
.sortlink {
    color: #2b6cb0;
    text-decoration: none;
    font-weight: 500;
}
.sortlink:hover {
    text-decoration: underline;
}

/* NEU: Fügt das Padding zu statischen Überschriften (Bild/Datenblatt/Aktionen) hinzu */
.main thead th > .sortlink {
    padding: 0 8px;
    display: inline-block;
}

/* Korrigierter Stil für Bauteilnamen-Links in der Tabelle */
table.main tbody tr td:first-child a {
    color: inherit !important;
    text-decoration: none !important;
    font-weight: 500;
}
table.main tbody tr td:first-child a:hover {
    color: #2b6cb0;
    text-decoration: underline;
}

/* ================================================= */
/* === 5. DETAILSEITEN-LAYOUT (component_detail.php) === */
/* ================================================= */
.detail-layout {
    display: flex;
    gap: 20px;
}
.detail-info {
    flex: 2;
    min-width: 0;
}
.detail-media {
    flex: 1;
    min-width: 150px;
    text-align: center;
}
.component-image, .qr-image {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 15px;
}
.qr-image {
    width: 150px;
    height: 150px;
}
.image-box, .qr-box {
    margin-bottom: 20px;
}

/* ================================================= */
/* === 6. MODAL STYLING & Duplikatsprüfung === */
/* ================================================= */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: auto;
    padding: 20px;
}

.modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    min-width: 320px;
    max-width: 600px;
    width: 90%;
    box-sizing: border-box;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.modal-content input,
.modal-content select,
.modal-content textarea {
    width: 100%;
    padding: 6px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Scrollbar-Styling */
.modal-content::-webkit-scrollbar {
    width: 8px;
}
.modal-content::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}
.modal-content::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

/* Duplikatsprüfung im Add-Modal */
.dup-results {
    display: none;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #dc3545;
    border-radius: 8px;
    background: #fff0f0;
    color: #a00;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    position: relative;
}
.dup-results.visible {
    display: block;
}

.dup-results ul {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 0;
}
.dup-results li a {
    color: #c00;
    text-decoration: underline;
}
.dup-header {
    font-weight: bold;
    font-size: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dup-close {
    background: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
    color: #900;
}
.dup-close:hover { color: #f00; }
.dup-note {
    font-size: 0.85em;
    color: #555;
    margin-top: 6px;
}


/* ================================================= */
/* === 7. FORMULAR-STYLING (LOGIN/PASSWORT ÄNDERN) === */
/* ================================================= */
.auth-form {
    font-family: system-ui, sans-serif;
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    width: 90%;
    max-width: 350px;
    margin: 40px auto;
    box-sizing: border-box;
}

.auth-form h2 {
    text-align: center;
    margin-top: 0;
    color: #333;
}

.auth-form input {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.auth-form label {
    font-weight: 500;
    display: block;
    margin-bottom: 5px;
}

.auth-form button {
    width: 100%;
    padding: 10px;
    border: none;
    background: #2b6cb0;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.auth-form button:hover {
    background: #2c5282;
}

.auth-form .form-message {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}
.auth-form .error-message {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}


/* ================================================= */
/* === 8. RESPONSIVE DESIGN (Media Queries) === */
/* ================================================= */

@media (max-width: 768px) {
    /* Container wird fast vollflächig */
    .container {
        width: 98%;
        padding: 10px;
    }
    
    body {
        padding: 10px;
    }

    /* Topbar Elemente stapeln (Suchfeld und Aktionen) */
    .topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    /* Suchfeld auf volle Breite setzen */
    .searchform {
        width: 100%;
        display: flex;
    }

    /* Aktions-Buttons in eine Zeile und erlauben Umbruch */
    .actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
    }
    
    .actions button, .actions .linkbtn {
        margin-left: 0;
        flex-grow: 1;
        min-width: 100px;
        text-align: center;
    }
    
    /* Modals auf Handys besser zentrieren und maximieren */
    .modal-content {
        max-width: 95%;
        margin: 0 10px;
    }
}

@media (max-width: 600px) {
    
    /* Verstecke den Tabellenkopf auf kleinen Geräten */
    table.main thead {
        display: none;
    }

    /* Alle Tabellenelemente als Blöcke anzeigen, damit sie stapeln */
    table.main, table.main tbody, table.main tr {
        display: block;
        width: 100%;
    }
    
    /* Jede Zeile (Bauteil) als separater Block */
    table.main tr {
        border: 1px solid #ddd;
        margin-bottom: 12px;
        padding: 0;
        border-radius: 6px;
        background: #fff;
    }
    
    /* Tabellenzellen: Layout für Label und Wert */
    table.main td {
        display: block;
        border: none;
        padding: 8px 15px;
        text-align: right;
        position: relative;
        padding-left: 50%;
        font-size: 0.95em;
        border-bottom: 1px dotted #eee;
        box-sizing: border-box;
        width: 100%;
    }
    
    table.main tr td:last-of-type {
        border-bottom: none;
    }

    /* Titel/Label der Zelle als Pseudo-Element */
    table.main td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #333;
    }
    
    /* Aktionen-Spalte optimieren */
    table.main td:nth-last-child(1) {
        text-align: center;
        padding-top: 15px;
        padding-left: 15px;
        border-bottom: none;
    }
    
    /* Aktionen-Buttons untereinander und auf volle Breite */
    table.main td:nth-last-child(1) button,
    table.main td:nth-last-child(1) .linkbtn {
        display: block;
        width: 90%;
        margin: 5px auto;
        box-sizing: border-box;
    }
    
    /* Detail-Layout stapeln */
    .detail-layout {
        flex-direction: column;
    }
    
    /* Detail-Tabelle auf Standard-Layout zurücksetzen */
    table.main.detail-table, 
    table.main.detail-table tr, 
    table.main.detail-table td {
        display: table;
        width: 100%;
        padding: 0;
    }

    table.main.detail-table tbody {
        display: table-row-group;
    }
    
    table.main.detail-table tr {
        display: table-row;
        margin-bottom: 0;
        border: none;
    }

    table.main.detail-table th, 
    table.main.detail-table td {
        display: table-cell;
        text-align: left;
        padding: 10px 8px;
        border-bottom: 1px solid #eee;
    }
    
    /* Entferne die Label-Anzeige, da th bereits das Label ist */
    table.main.detail-table td::before {
        content: none;
    }
}

/* ================================================= */
/* === 9. BENUTZER & AUTHENTIFIZIERUNG === */
/* ================================================= */

/* User-Info-Block Styling (Für die rechte Seite der Navbar) */

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Rechtsbündig im Block */
    padding: 0 1rem;
    font-size: 0.95rem;
}

.user-info strong {
    font-weight: 600;
    margin-bottom: 2px;
    color: #ecf0f1; /* Heller Text für den Namen */
}

/* Spezifisches Styling für die Rolle (Badge) */
.user-role {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Basis-Farbe (Gast/Leser) */
    background-color: #7f8c8d;
    color: #ecf0f1;
}

/* Farbcodierung der Rollen (Optional, aber empfohlen) */
/* Admin: Rot/Dunkelrot */
.role-1 {
    background-color: #c0392b;
}
/* Editor: Blau/Dunkelblau */
.role-2 {
    background-color: #2980b9;
}
/* Gast: Grün/Hellgrün */
.role-3 {
    background-color: #27ae60;
}
/* Leser/Anonym: Grau/Silber */
.role-4 {
    background-color: #7f8c8d;
}