/* 1. HAUPT-HINTERGRUND */
body, html {
    background-color: #1a1a1a !important;
    background-image: url('img/pingvin-bg.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    background-size: cover !important;
}

/* Transparenz für die UI-Bereiche */
#app, .dashboard, main, header, .sidebar-wrapper, #login {
    background-color: transparent !important;
    background: transparent !important;
}

/* 2. MAIN PAGE: PFAD-STREIFEN (BREADCRUMB) VERGLASEN */
.breadcrumb {
    background-color: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
}

/* 3. MAIN PAGE: WEISSE GLAS-ORDNER */
.item {
    background-color: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.item i, .item .name, .item .size, .item .mtime {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.item:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(110, 139, 61, 0.6) !important;
    box-shadow: 0 0 15px rgba(110, 139, 61, 0.3) !important;
    transform: translateY(-3px) !important;
}

.item.folder i, .item i[data-icon="folder"] {
    color: #6e8b3d !important;
}

/* 4. LOGIN-BOX (Inkl. Hover-Effekt) */
#login form {
    min-width: 440px !important;
    padding: 50px 40px !important;
    border-radius: 12px !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6) !important;
    transition: background-color 0.3s ease, border 0.3s ease !important;
}

/* Glas-Hover für die Login-Box */
#login form:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(110, 139, 61, 0.4) !important;
}

#login h1 {
    font-size: 0 !important;
    margin-bottom: 45px !important;
}

#login h1::after {
    content: "files.renderkiste" !important;
    font-size: 32px !important;
    color: #ffffff !important;
    display: block !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

#login form label, #login form input {
    color: #ffffff !important;
}

/* 5. LOGIN-BUTTON (Invert-Effekt) */
#login input[type="submit"], #login .button {
    background-color: #6e8b3d !important;
    color: #ffffff !important;
    border: 2px solid #6e8b3d !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    transition: all 0.25s ease-in-out !important;
    cursor: pointer !important;
    margin-top: 20px !important;
}

/* Invertierter Zustand: Dunkel, grüner Rand, schwarze Schrift */
#login input[type="submit"]:hover, #login .button:hover {
    background-color: #0c0c0c !important; /* Dunkel */
    color: #000000 !important;            /* Schwarze Schrift */
    border: 2px solid #6e8b3d !important; /* Grüner Rand */
    box-shadow: 0 0 20px rgba(110, 139, 61, 0.5) !important;
    transform: scale(1.02) !important;
}