/* Sfondo simple layout solo fuori dal custom auth wrapper del plugin */
.fi-body.fi-panel-medic :not(.custom-auth-wrapper) .fi-simple-layout {
    background:
        radial-gradient(
            1100px 600px at 15% 10%,
            rgba(14, 165, 233, 0.22),
            transparent 60%
        ),
        radial-gradient(
            900px 520px at 85% 0%,
            rgba(16, 185, 129, 0.16),
            transparent 55%
        ),
        linear-gradient(180deg, #d1fae5 0%, #d1fae5 100%);
}

/* Card principale del form nel custom auth layout */
.fi-body.fi-panel-medic .custom-auth-form-panel .fi-simple-main {
    background: linear-gradient(
        180deg,
        rgba(14, 78, 168, 0.16),
        rgba(14, 78, 168, 0.08)
    ) !important;
    border: 1px solid rgba(14, 78, 168, 0.3) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 44px rgba(14, 78, 168, 0.22) !important;
}

/* Evita il fondo nero in dark mode sul form panel */
.dark .fi-body.fi-panel-medic .custom-auth-form-panel .fi-simple-main {
    background: linear-gradient(
        180deg,
        rgba(14, 78, 168, 0.22),
        rgba(14, 78, 168, 0.12)
    ) !important;
}

/* Card/section del form login */
.fi-body.fi-panel-medic .custom-auth-form-panel .fi-sc-section > .fi-section {
    --fi-bg: 234 242 251; /* #eaf2fb */
    --fi-bg-content: 244 248 253; /* #f4f8fd */
    --fi-bg-surface: 244 248 253;

    background-color: rgb(var(--fi-bg-content)) !important;
    border-radius: 16px !important;
    overflow: hidden;
    border: 1px solid rgba(14, 78, 168, 0.28) !important;
    box-shadow: 0 14px 34px rgba(14, 78, 168, 0.18) !important;
}

/* Header della Section */
.fi-body.fi-panel-medic
    .custom-auth-form-panel
    .fi-sc-section
    .fi-section-header {
    background: linear-gradient(
        180deg,
        rgba(14, 78, 168, 0.18),
        rgba(14, 78, 168, 0.06)
    ) !important;
    border-bottom: 1px solid rgba(14, 78, 168, 0.22);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

/* Wrapper input */
.fi-body.fi-panel-medic .custom-auth-form-panel .fi-sc-section .fi-input-wrp {
    background-color: #f1f6fd !important;
    border-radius: 12px;
    border-color: rgba(14, 78, 168, 0.35);
}

/* Focus pulito (medical style) */
.fi-body.fi-panel-medic .custom-auth-form-panel .fi-sc-section .fi-input:focus {
    box-shadow: 0 0 0 2px rgba(14, 78, 168, 0.25);
}

/* Testo input leggibile (nero) */
.fi-body.fi-panel-medic .custom-auth-form-panel .fi-sc-section .fi-input {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

.fi-body.fi-panel-medic
    .custom-auth-form-panel
    .fi-sc-section
    .fi-input::placeholder {
    color: #64748b !important;
}

/* Titolo */
.fi-body.fi-panel-medic .custom-auth-form-panel .fi-simple-header-heading {
    color: #0f8f83 !important;
}

/* Desktop: 2 colonne (empty panel + form panel) */
.fi-body.fi-panel-medic .custom-auth-wrapper {
    min-height: 100vh;
    height: 100vh;
    display: grid;
    grid-template-columns: 60% 40%;
    overflow: hidden;
}

/* Form panel (centrato) */
.fi-body.fi-panel-medic .custom-auth-form-panel {
    height: 100%;
    overflow-y: auto;
    background: #f4f8fd;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* Wrapper form: card centrata e con width controllata */
.fi-body.fi-panel-medic .custom-auth-form-wrapper {
    width: 100%;
    max-width: 420px;
}

/* Empty panel: contenitore della custom view (immagine/overlay gestiti in Blade) */
.fi-body.fi-panel-medic .custom-auth-empty-panel {
    height: 100%;
    position: relative;
    overflow: hidden;
    background: transparent !important;
}

/* garantisce che la view riempia tutto l'empty panel */
.fi-body.fi-panel-medic .custom-auth-empty-panel > * {
    height: 100%;
}


ul.best-practice__list {
    list-style: disc !important;
}

ul.fi-sidebar-group-items,
ul.fi-fo-repeater-item-header-end-actions,
ul.fi-fo-repeater-item-header-start-actions,
ul.fi-fo-repeater-items {
    list-style: none !important;
}




/* Mobile: niente pannello immagine */
@media (max-width: 768px) {
    .fi-body.fi-panel-medic .custom-auth-wrapper {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100vh;
    }

    .fi-body.fi-panel-medic .custom-auth-empty-panel {
        display: none !important;
    }
}