/* ==========================================================================
   DoLogin.css - schermata di accesso (OllyGest / VoyagePRO / OllyMed)
   Tutte le regole sono sotto body#Logi per non toccare il resto dell'app.
   ========================================================================== */

#Logi {
   --lg-accent:      #3399BA;
   --lg-accent-dark: #257a97;
   --lg-accent-soft: rgba(51, 153, 186, .14);
   --lg-orange:      #E97A2F;
   --lg-purple:      #BB80CC;
   --lg-blue:        #87A6FF;
   --lg-green:       #99CCB1;
   --lg-ink:         #1d2939;
   --lg-muted:       #667085;
   --lg-line:        #e4e7ec;
   --lg-field:       #f7f9fb;
   --lg-danger:      #d92d20;
   --lg-radius:      22px;
   --lg-font:        "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Pagina ---------- */
html { height: 100%; }
body#Logi { position: relative; top: auto; right: auto; bottom: auto; left: auto; min-width: 0; min-height: 100%; height: auto; margin: 0; overflow-x: hidden; overflow-y: auto;
            font-family: var(--lg-font); color: var(--lg-ink); background: #eef3f7 none; -webkit-font-smoothing: antialiased; }
#Logi *, #Logi *::before, #Logi *::after { box-sizing: border-box; }

/* sfondo con macchie di colore del marchio */
#Logi .LgBackdrop { position: fixed; inset: 0; overflow: hidden; z-index: 0; background: linear-gradient(135deg, #f4f8fb 0%, #e8f0f6 55%, #eef1fa 100%); }
#Logi .LgBlob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; }
#Logi .LgBlob1 { width: 520px; height: 520px; top: -160px; left: -120px; background: var(--lg-accent); opacity: .35; }
#Logi .LgBlob2 { width: 460px; height: 460px; bottom: -180px; right: -80px; background: var(--lg-purple); opacity: .30; }
#Logi .LgBlob3 { width: 340px; height: 340px; top: 40%; right: 22%; background: var(--lg-orange); opacity: .14; }

#Logi .LgWrap { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px 64px; }
#Logi #loginForm { width: 100%; max-width: 1000px; margin: 0; }

/* ---------- Card ---------- */
#Logi #login-box.LgCard { position: static; width: 100%; height: auto; min-height: 580px; margin: 0; border: 0; background: #fff none; font-size: 14px;
                          display: grid; grid-template-columns: 440px 1fr; border-radius: var(--lg-radius); overflow: hidden;
                          box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 30px 70px -24px rgba(22, 50, 80, .35); animation: lgIn .5s ease-out both; }
@keyframes lgIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Pannello sinistro ---------- */
#Logi .LgSide { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 36px 36px 40px; color: #fff;
                background: linear-gradient(180deg, rgba(51, 153, 186, .22) 0%, rgba(22, 44, 72, 0) 30%, rgba(22, 44, 72, .05) 50%, rgba(16, 32, 54, .78) 100%), url(/image/logswaphome.jpg) center / cover no-repeat; }
#Logi .LgSideText h2 { margin: 0 0 12px; font: 600 28px/1.2 var(--lg-font); color: #fff; letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
#Logi .LgSideText p  { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.92); max-width: 340px; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
#Logi .LgSideText::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; margin-bottom: 18px;
                            background: linear-gradient(90deg, var(--lg-accent), var(--lg-purple), var(--lg-orange)); }

/* ---------- Pannello destro ---------- */
#Logi .LgMain { display: flex; flex-direction: column; justify-content: center; padding: 44px 64px 36px; }
#Logi .LgLogo { height: 78px; width: 100%; max-width: 360px; margin-bottom: 28px; background: url(/image/ollygest_logo_2025.svg) left center / contain no-repeat;
                filter: saturate(1.2) contrast(1.2) brightness(.88); }
#Logi.voyagepro .LgLogo { background-image: url(/image/voyagepro_logo_2025.svg); }
#Logi.ollymed   .LgLogo { background-image: url(/image/ollymed_logo_2025.svg); }

#Logi .LgHead h1 { margin: 0 0 6px; font: 700 26px/1.2 var(--lg-font); color: var(--lg-ink); letter-spacing: -.01em; }
#Logi .LgHead p  { margin: 0 0 26px; font-size: 14px; color: var(--lg-muted); }

/* ---------- Campi ---------- */
#Logi .LgField { margin-bottom: 16px; }
#Logi .LgField label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #344054; }
#Logi .LgInput { position: relative; display: flex; align-items: center; height: 48px; border: 1px solid var(--lg-line); border-radius: 12px; background: var(--lg-field);
                 transition: border-color .15s, box-shadow .15s, background-color .15s; }
#Logi .LgInput:hover { border-color: #cfd6de; }
#Logi .LgInput:focus-within { border-color: var(--lg-accent); background: #fff; box-shadow: 0 0 0 4px var(--lg-accent-soft); }
#Logi .LgInput > svg { flex: 0 0 auto; width: 20px; height: 20px; margin-left: 14px; fill: none; stroke: #98a2b3; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
#Logi .LgInput:focus-within > svg { stroke: var(--lg-accent); }
#Logi .LgInput input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0 14px 0 12px; border: 0; outline: 0; background: transparent;
                       font: 600 16px var(--lg-font); color: var(--lg-ink); letter-spacing: .02em; cursor: text; }
#Logi .LgInput input::placeholder { color: #b0b8c4; font-weight: 400; text-transform: none; letter-spacing: 0; }
#Logi .LgInput input.LgUpper { text-transform: uppercase; }
#Logi #LogPassword { letter-spacing: .12em; }
#Logi #LogPassword::placeholder { letter-spacing: 0; }
#Logi .LgInput input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--lg-field) inset; -webkit-text-fill-color: var(--lg-ink); }

#Logi .LgEye { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 4px; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
#Logi .LgEye svg { width: 20px; height: 20px; fill: none; stroke: #98a2b3; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#Logi .LgEye:hover { background: #eef2f6; }
#Logi .LgEye.LgOn svg { stroke: var(--lg-accent); }

#Logi .LgCaps { display: none; margin-top: 6px; font-size: 12px; font-weight: 600; color: #b54708; }
#Logi .LgCaps.LgShow { display: block; }

/* ---------- Bottone ---------- */
#Logi #pbLoginButton.LgBtn { position: relative; width: 100%; height: 50px; margin: 8px 0 0; padding: 0 20px; border: 0; border-radius: 12px; cursor: pointer;
                             font: 600 16px var(--lg-font); color: #fff; letter-spacing: .02em;
                             background: linear-gradient(180deg, #3aa6c8 0%, var(--lg-accent) 100%);
                             box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 8px 20px -8px rgba(51,153,186,.7);
                             transition: transform .12s, box-shadow .15s, filter .15s; }
#Logi #pbLoginButton.LgBtn:hover  { color: #fff; filter: brightness(1.05); box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 12px 26px -8px rgba(51,153,186,.8); }
#Logi #pbLoginButton.LgBtn:active { transform: translateY(1px); }
#Logi #pbLoginButton.LgBtn:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--lg-accent-soft), 0 8px 20px -8px rgba(51,153,186,.7); }
#Logi #pbLoginButton.LgBtn:disabled { cursor: progress; filter: saturate(.7); }
#Logi #pbLoginButton.LgBtn:disabled::before { content: ""; display: inline-block; width: 16px; height: 16px; margin: 0 10px -3px 0; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: lgSpin .7s linear infinite; }
@keyframes lgSpin { to { transform: rotate(360deg); } }

/* ---------- Errore (toast a comparsa, non sposta il layout) ---------- */
#Logi .LgToast { position: fixed; top: 24px; left: 50%; z-index: 1000; width: 480px; max-width: calc(100vw - 32px); display: flex; align-items: flex-start; gap: 14px;
                 padding: 18px 52px 20px 18px; overflow: hidden; background: #fff; border: 1px solid #fecdca; border-radius: 14px;
                 box-shadow: 0 24px 48px -16px rgba(16, 32, 54, .35), 0 2px 6px rgba(16, 24, 40, .08);
                 opacity: 0; visibility: hidden; transform: translate(-50%, -24px); transition: opacity .25s, transform .35s cubic-bezier(.2, .9, .3, 1.15), visibility 0s linear .35s; }
#Logi .LgToast.LgShow { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s, transform .35s cubic-bezier(.2, .9, .3, 1.15), visibility 0s; }
#Logi .LgToastIcon { flex: 0 0 30px; width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; background: var(--lg-danger); color: #fff; font: 700 17px/30px var(--lg-font); text-align: center;
                     box-shadow: 0 0 0 5px #fef3f2; }
#Logi .LgToastBody { flex: 1 1 auto; min-width: 0; }
#Logi .LgToastTitle { margin-bottom: 3px; font-size: 17px; font-weight: 700; color: var(--lg-ink); }
#Logi .LgToastMsg { font-size: 16px; line-height: 1.45; color: var(--lg-muted); word-wrap: break-word; }
#Logi .LgToastClose { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
                      font: 400 22px/30px var(--lg-font); color: #98a2b3; }
#Logi .LgToastClose:hover { background: #f2f4f7; color: var(--lg-ink); }
#Logi .LgToastBar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lg-danger); opacity: .75; transform-origin: left center; transform: scaleX(0); }
#Logi .LgToast.LgShow .LgToastBar { animation: lgToastBar var(--lg-toast-ms, 3000ms) linear forwards; }
#Logi .LgToast.LgShow:hover .LgToastBar { animation-play-state: paused; }
@keyframes lgToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* varianti: logout riuscito (verde) e sessione terminata / accesso richiesto (ambra) */
#Logi .LgToast.LgSuccess { border-color: #abefc6; }
#Logi .LgToast.LgSuccess .LgToastIcon { background: #12b76a; box-shadow: 0 0 0 5px #ecfdf3; font-size: 16px; }
#Logi .LgToast.LgSuccess .LgToastBar { background: #12b76a; }
#Logi .LgToast.LgInfo { border-color: #fedf89; }
#Logi .LgToast.LgInfo .LgToastIcon { background: #f79009; box-shadow: 0 0 0 5px #fffaeb; font-family: Georgia, serif; font-style: italic; }
#Logi .LgToast.LgInfo .LgToastBar { background: #f79009; }

/* ---------- Partner (solo VoyagePRO) ---------- */
#Logi .LgPartners { display: none; position: static; height: auto; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--lg-line); }
#Logi.voyagepro .LgPartners { display: block; }
#Logi .LgPartnersLabel { margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #98a2b3; text-align: center; }
#Logi .LgPartnersGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 18px; align-items: center; justify-items: center; }
#Logi .LgPartnersGrid img { max-width: 100%; height: 22px; object-fit: contain; transition: transform .2s; }
#Logi .LgPartnersGrid img.LgSmall { height: 14px; }
#Logi .LgPartnersGrid img:hover { transform: scale(1.06); }

/* ---------- Footer ---------- */
#Logi .LgFooter { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; padding: 12px 16px; text-align: center; font-size: 12px; color: #7a8594; letter-spacing: .02em; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
   #Logi #login-box.LgCard { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; min-height: 0; }
   #Logi .LgSide { display: none; }
   #Logi .LgMain { padding: 36px 28px 28px; }
}
@media (max-height: 700px) {
   #Logi .LgFooter { position: static; }
   #Logi .LgWrap { padding-bottom: 16px; }
}

/* ==========================================================================
   Finestra di conferma (jquery-confirm, tema "supervan") nella pagina di login
   es. "Utente gia' connesso su un altro pc"
   ========================================================================== */
#Logi .jconfirm.jconfirm-supervan .jconfirm-bg { background-color: rgba(16, 32, 54, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#Logi .jconfirm.jconfirm-supervan .jconfirm-box-container { width: 460px; max-width: calc(100vw - 32px); margin: 0 auto; float: none; }
#Logi .jconfirm.jconfirm-supervan .jconfirm-box { padding: 34px 34px 26px; border-radius: 20px; background: #fff; text-align: center; font-family: var(--lg-font);
                                                  box-shadow: 0 30px 70px -20px rgba(16, 32, 54, .45), 0 2px 6px rgba(16, 24, 40, .08); }
#Logi .jconfirm.jconfirm-supervan .jconfirm-box div.title-c { font-size: 21px; line-height: 1.3; font-weight: 700; color: var(--lg-ink); }
#Logi .jconfirm.jconfirm-supervan .jconfirm-box div.title-c::before { content: "!"; display: block; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
                                                                      background: #fdf0e6; box-shadow: 0 0 0 8px #fef7f1; color: var(--lg-orange);
                                                                      font: 700 28px/56px var(--lg-font); text-align: center; }
#Logi .jconfirm.jconfirm-supervan .jconfirm-box div.title-c > * { padding-bottom: 10px; }
#Logi .jconfirm.jconfirm-supervan .jconfirm-box div.content-pane { margin-bottom: 26px; }
#Logi .jconfirm.jconfirm-supervan .jconfirm-box div.content { width: 100%; color: var(--lg-muted); font-size: 15px; line-height: 1.6; }
#Logi .jconfirm.jconfirm-supervan .jconfirm-box .buttons { display: flex; gap: 12px; justify-content: center; float: none; }
#Logi .jconfirm.jconfirm-supervan .jconfirm-box .buttons button { flex: 1 1 0; min-width: 0; height: 46px; margin: 0; padding: 0 18px; border-radius: 12px; cursor: pointer;
                                                                  font: 600 15px var(--lg-font); transition: filter .15s, background-color .15s, border-color .15s; }
#Logi .jconfirm.jconfirm-supervan .jconfirm-box .buttons button.btn-info { border: 0; color: #fff; background: linear-gradient(180deg, #3aa6c8 0%, var(--lg-accent) 100%);
                                                                           box-shadow: 0 8px 20px -8px rgba(51,153,186,.7); }
#Logi .jconfirm.jconfirm-supervan .jconfirm-box .buttons button.btn-info:hover { filter: brightness(1.05); }
#Logi .jconfirm.jconfirm-supervan .jconfirm-box .buttons button.btn-danger { border: 1px solid var(--lg-line); color: #344054; background: #fff; }
#Logi .jconfirm.jconfirm-supervan .jconfirm-box .buttons button.btn-danger:hover { background: #f5f7fa; border-color: #cfd6de; }
#Logi .jconfirm.jconfirm-supervan .jconfirm-box div.closeIcon { top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 10px; color: #98a2b3; opacity: 1; line-height: 32px; font-size: 0; }
#Logi .jconfirm.jconfirm-supervan .jconfirm-box div.closeIcon:hover { background: #f2f4f7; color: var(--lg-ink); }
#Logi .jconfirm.jconfirm-supervan .jconfirm-box div.closeIcon .DialogoX { font-size: 24px; font-style: normal; line-height: 32px; }   /* 12/10/2026: x di Dialogo.js (prima .fa-close::after di jquery-confirm) */