:root { 
    --primary: #9575CD; 
    --primary-dark: #7E57C2; 
    --danger: #dc3545;
    --danger-light: #fee2e2;
    --bg: #f0f2f5; 
    --box-bg: #ffffff; 
    --text: #333; 
    --border: #ddd; 
    --table-hover: #f9f9f9;
}

body.dark-mode { 
    --bg: #121212; 
    --box-bg: #1e1e1e; 
    --text: #e0e0e0; 
    --border: #333; 
    --table-hover: #252525;
}

body { 
    font-family: 'Segoe UI', sans-serif; 
    background: var(--bg); 
    padding: 20px; 
    color: var(--text); 
    transition: 0.3s; 
    margin: 0; 
}

/* --- LOGIN SEITE OPTIMIERUNG --- */

.login-body {
    display: flex;
    flex-direction: column; /* Stapelt Logo und Box untereinander */
    align-items: center;    /* Zentriert beides horizontal */
    justify-content: center; /* Zentriert beides vertikal im Viewport */
    min-height: 100vh;
    background: var(--bg);
    margin: 0;
}

.login-box {
    background: var(--box-bg); /* Nutzt dein Box-Weiß/Dunkelgrau */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid var(--border);
    width: 100%;
    max-width: 350px; /* Hier begrenzen wir die Breite auf dem Desktop */
    text-align: center;
}

.login-box h2 {
    margin-top: 0;
    color: var(--primary);
    font-size: 1.5rem;
}

/* Spezifische Korrektur für das Input im Login, 
   damit es nicht an den Rand der Box klatscht */
.login-box input {
    margin-bottom: 15px;
}

/* Der Zurück-Link unter dem Button */
.login-box p a {
    text-decoration: none;
    transition: color 0.2s;
}

.login-box p a:hover {
    color: var(--primary) !important;
}

.login-image {
    width: 120px;           /* Größe des Logos im Login-Bereich */
    height: auto;
    margin-bottom: 20px;    /* Abstand zur Login-Box */
    display: block;         /* Sorgt dafür, dass Abstände korrekt greifen */
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1)); /* Optionaler dezenter Schatten */
}

.container { max-width: 900px; margin: 0 auto; }

/* Container-Steuerung */
.header-with-image {
    display: flex;
    align-items: center; /* Richtet Bild und Text mittig aneinander aus */
    gap: 25px;           /* Abstand zwischen Bild und Text */
}

/* Bild-Steuerung */
.header-logo {
    width: 100px;        /* Breite anpassen */
    height: auto;        /* Proportional skalieren */
    object-fit: contain;
    flex-shrink: 0;      /* Verhindert, dass das Bild gequetscht wird */
}

/* Mobile Anpassung für das Login-Logo */
@media (max-width: 600px) {
    .login-image {
        width: 80px;         /* Kleineres Logo spart Platz */
        margin-bottom: 10px; /* Weniger Abstand zur Box */
    }

    .login-body {
        /* WICHTIG: Wir ändern das Padding von 80px auf einen kleineren Wert oben 
           und setzen die Ausrichtung auf 'flex-start', damit die Box oben beginnt 
           statt in der Mitte zu "hängen" */
        padding: 40px 20px; 
        justify-content: flex-start; 
        min-height: 100vh;
    }

    .login-box {
        padding: 20px;       /* Box innen kompakter machen */
        max-width: 90%;      /* Mehr Breite auf schmalen Handys nutzen */
    }
}

/* Dashboard Header & Buttons */
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }

.mode-toggle, .btn-logout { 
    background: var(--box-bg); 
    border: 1px solid var(--border); 
    color: var(--text); 
    padding: 0 15px; 
    border-radius: 6px; 
    cursor: pointer; 
    font-size: 0.9rem; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    text-decoration: none; 
    height: 42px; 
    box-sizing: border-box; 
    font-weight: bold;
    transition: all 0.2s ease;
}

/* Spezifische Hover-Farben für Header */
.mode-toggle:hover { 
    background: var(--primary); 
    color: white; 
    border-color: var(--primary-dark);
}

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

/* Statistik Grid */
.stats-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 20px; 
    margin-bottom: 30px; 
}
.stat-card { 
    background: var(--box-bg); 
    padding: 20px; 
    border-radius: 12px; 
    text-align: center; 
    border: 1px solid var(--border); 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    min-height: 120px;
}

/* Box & Formulare */
.box { 
    background: var(--box-bg); 
    padding: 20px; 
    border-radius: 12px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    margin-bottom: 20px; 
    border: 1px solid var(--border); 
}
input, select, textarea { 
    width: 100%; padding: 12px; margin-bottom: 15px; 
    border: 1px solid var(--border); border-radius: 6px; 
    box-sizing: border-box; font-size: 1rem; 
    background: var(--bg); color: var(--text); 
}
button[name="save_book"], button[type="submit"] { 
    background: var(--primary); color: white; border: none; 
    padding: 14px; border-radius: 6px; cursor: pointer; 
    width: 100%; font-size: 1rem; font-weight: bold; 
}

/* Scanner-Aktivierungs-Button (Kamera) & Such-Button */
#startScanner, button[name="fetch_isbn"] {
    width: 50px;
    height: 42px; /* Gleiche Höhe wie das Input-Feld */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    color: white;
}

#startScanner {
    background: var(--primary);
}

#startScanner:hover {
    background: var(--primary-dark);
}

button[name="fetch_isbn"] {
    background: #6c757d; /* Grau für die Suche */
}

button[name="fetch_isbn"]:hover {
    background: #5a6268;
}

/* Container-Fix für die Suchzeile */
.box form div[style*="display: flex"] {
    align-items: center; /* Zentriert Input und Buttons vertikal zueinander */
    gap: 8px;
}

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

/* Vereinheitlichtes Padding für alle Zellen */
th, td { 
    padding: 12px 10px; /* Rechts/Links 10px für alle */
    text-align: left;
    vertical-align: middle;
}

th {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    border-bottom: 2px solid var(--border);
}

td { 
    border-bottom: 1px solid var(--border); 
}

/* Die allererste Spalte (Cover) knallhart links bündig ohne Einrückung */
th:first-child, td:first-child {
    padding-left: 0 !important;
    width: 60px; /* Fixe Breite für die Cover-Spalte hilft bei der Ausrichtung */
}


.action-cell { 
    display: flex; 
    gap: 8px; 
    align-items: center; 
    justify-content: flex-start;
    height: 65px; /* Angleichung an die Thumbnail-Höhe für perfekte Zentrierung */
}

.btn-icon {
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    width: 38px; 
    height: 38px; 
    border-radius: 6px;
    border: 1px solid var(--border); 
    background: var(--box-bg);
    text-decoration: none; 
    transition: all 0.2s ease;
}

/* Spezifische Hover-Farben für Tabellen-Icons */
.btn-icon.edit { color: var(--primary); }
.btn-icon.edit:hover { 
    background: var(--primary); 
    color: white; 
    border-color: var(--primary-dark); 
}

.btn-icon.delete { color: var(--danger); }
.btn-icon.delete:hover { 
    background: var(--danger); 
    color: white; 
    border-color: #b22a37; 
}

.preview-thumb { width: 45px; height: 65px; object-fit: contain; background: #eee; border-radius: 4px; display: block; }

/* Scanner - Komplett isoliert */
#interactive.viewport { 
    width: 100%; 
    height: 350px; 
    overflow: hidden; 
    position: relative; 
    background: #000; 
    border-radius: 12px; 
    margin-bottom: 15px; 
    display: none; /* Das sorgt dafür, dass er (und der Button darin) unsichtbar ist */
}

/* Der Abbrechen-Button im Scanner */
#stopScanner {
    position: absolute; 
    top: 10px; 
    right: 10px; 
    width: auto; 
    padding: 8px 15px; 
    background: var(--danger); 
    color: white;
    border: none;
    border-radius: 6px;
    z-index: 20; 
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.scanner-overlay { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 70%; 
    height: 40%; 
    border: 2px solid var(--primary); 
    box-shadow: 0 0 0 1000px rgba(0,0,0,0.5); 
    z-index: 10; 
    pointer-events: none; 
}

/* Mobile View */
@media (max-width: 768px) {
    .logout-text, #mode-text { display: none; }
    tr { 
        display: grid; grid-template-areas: "cover info" "price action"; 
        grid-template-columns: 70px 1fr; gap: 10px; padding: 15px; 
        border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; 
    }
    thead { display: none; }
    td { border: none !important; padding: 0 !important; }
    td:nth-of-type(1) { grid-area: cover; }
    td:nth-of-type(2) { grid-area: info; }
    td:nth-of-type(3) { grid-area: price; font-weight: bold; align-self: center; }
    td:nth-of-type(4) { grid-area: action; justify-self: end; }
    .action-cell { height: auto; }
}