/* FileBrowser Custom Branding CSS */

/* Add custom favicon */
head {
    /* This will be handled by HTML, but included for reference */
}

/* Login page logo replacement */
.login .logo,
.login-form .logo,
.auth .logo {
    background-image: url('/static/icon.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto 2rem !important;
}

/* Hide default text/SVG logo content */
.login .logo svg,
.login-form .logo svg,
.auth .logo svg,
.login .logo img,
.login-form .logo img,
.auth .logo img {
    display: none !important;
}

/* File manager header logo replacement */
.header .logo,
.header-logo,
.topbar .logo,
header .logo {
    background-image: url('/static/icon.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 40px !important;
    height: 40px !important;
    text-indent: -9999px !important; /* Hide text */
    overflow: hidden !important;
}

/* Hide default header logo content */
.header .logo svg,
.header-logo svg,
.topbar .logo svg,
header .logo svg,
.header .logo img,
.header-logo img,
.topbar .logo img,
header .logo img {
    display: none !important;
}

/* Alternative selectors for different FileBrowser versions */
[class*="logo"] {
    background-image: url('/static/icon.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Ensure login form styling remains clean */
.login-form {
    background: var(--card-bg, #fff);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Optional: Customize login page background */
.login-page,
.auth-page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Optional: Style the login container */
.login-container {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .login .logo,
    .login-form .logo,
    .auth .logo {
        width: 80px !important;
        height: 80px !important;
        margin: 0 auto 1rem !important;
    }
    
    .header .logo,
    .header-logo,
    .topbar .logo,
    header .logo {
        width: 32px !important;
        height: 32px !important;
    }
}

/* Dark mode compatibility */
@media (prefers-color-scheme: dark) {
    .login-form {
        background: var(--card-bg-dark, #2d3748);
        color: var(--text-dark, #e2e8f0);
    }
}