/* ==============================================
   sartUP - Auth Pages Styles
   ============================================== */

/* Panel sinistra con background personalizzato */
.auth-panel {
    background: 
        linear-gradient(
            color-mix(in srgb, var(--app-shadow-tint) 85%, transparent),
            color-mix(in srgb, var(--app-shadow-tint) 65%, transparent)
        ),
        url("../images/auth-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 
        inset 0 0 120px color-mix(in srgb, var(--app-shadow-tint) 90%, transparent),
        0 10px 40px color-mix(in srgb, var(--app-shadow-tint) 60%, transparent);
}

/* Alternativa: solo nero vignettato */
.auth-panel-dark {
    background: radial-gradient(
        circle at center,
        var(--app-text) 0%,
        var(--app-text) 100%
    );
    box-shadow: 0 10px 40px color-mix(in srgb, var(--app-shadow-tint) 80%, transparent);
}

/* Alternativa: gradiente colorato */
.auth-panel-gradient {
    background: linear-gradient(
        135deg,
        var(--app-accent) 0%,
        var(--app-cat-purple) 50%,
        var(--app-cat-magenta) 100%
    );
    box-shadow: 0 10px 40px color-mix(in srgb, var(--app-shadow-tint) 30%, transparent);
}

/* Pannello con immagine (gestito inline nel Blade) */
.auth-panel-image {
    position: relative;
}

.auth-panel-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        color-mix(in srgb, var(--app-shadow-tint) 70%, transparent),
        color-mix(in srgb, var(--app-shadow-tint) 50%, transparent)
    );
    z-index: 0;
}

.auth-panel-image > * {
    position: relative;
    z-index: 1;
}

/* Logo */
.auth-logo {
    max-width: 180px;
    height: auto;
    filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--app-on-accent) 15%, transparent));
    transition: transform 0.3s ease;
}

.auth-logo:hover {
    transform: scale(1.05);
}

/* Titolo */
.auth-title {
    color: var(--app-surface);
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
    text-shadow: 0 2px 8px color-mix(in srgb, var(--app-shadow-tint) 50%, transparent);
}

/* Sottotitolo */
.auth-subtitle {
    color: color-mix(in srgb, var(--app-on-accent) 80%, transparent);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Descrizione */
.auth-description {
    color: color-mix(in srgb, var(--app-on-accent) 70%, transparent);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-top: 2rem;
}

/* Form panel (destra) */
.auth-form-panel {
    background: linear-gradient(135deg, var(--app-surface) 0%, var(--app-surface-2) 100%);
}

/* ============================================
   Icon Sizes (allineato con admin.css)
   ============================================ */
.icon-xs {
    width: 14px;
    height: 14px;
}

.icon-sm {
    width: 16px;
    height: 16px;
}

.icon-md {
    width: 20px;
    height: 20px;
}

.icon-lg {
    width: 32px;
    height: 32px;
}