/* Kerria Office – tema pagina di login Omada (iniettato da nginx).
   Regola: non si altera la geometria originale di Omada (posizioni assolute),
   si cambiano solo colori, font, logo e testi. */
@font-face{font-family:"KerriaManrope";src:url(/kerria/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}

body:has(#loginView){
  background:
    radial-gradient(900px 600px at 88% 8%, rgba(227,30,36,.22), transparent 60%),
    radial-gradient(700px 520px at 0% 100%, rgba(56,97,180,.22), transparent 60%),
    linear-gradient(180deg,#0A1426 0%,#0E1B33 100%) !important;
  background-attachment:fixed !important;
}
#loginView, #loginView *:not(.icon){font-family:"KerriaManrope",Manrope,Arial,sans-serif !important}

/* header */
#loginView .site__header, #loginView .header, #loginView .header__status, #loginView .header__left{background:transparent !important}
#loginView .site__header{border-bottom:1px solid rgba(255,255,255,.07) !important;backdrop-filter:blur(8px)}
#loginView .header__logo{
  width:150px !important;height:30px !important;
  background:url(/kerria/logo-white.png) left center/contain no-repeat !important;
}
#loginView .header__logo *{visibility:hidden !important}

/* titolo + sottotitolo */
#loginView .login-title *{color:#EEF2F8 !important;font-weight:800 !important;letter-spacing:-.02em !important}
#loginView .kerria-sub{display:block;color:#9AA8BC !important;font-size:14px !important;font-weight:500 !important;letter-spacing:0 !important;margin-top:10px;white-space:nowrap}

/* card: ottenuta con ombre "spread", senza padding che sposterebbe le icone */
#loginView .login-form{
  border-radius:16px !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.45) !important;
  padding:16px 30px 22px !important;
}
/* le icone campo sono in position:absolute: le riancoro al loro contenitore
   così il padding della card non le separa dai campi */
#loginView #loginArea, #loginView #loginArea .fieldset-content{position:relative !important}

/* campi */
#loginView #username .widget-wrap, #loginView #password .widget-wrap{
  background:rgba(10,20,38,.85) !important;
  border:1px solid rgba(255,255,255,.14) !important;border-radius:8px !important;
  transition:border-color .2s, box-shadow .2s !important;
}
#loginView #username .widget-wrap:focus-within, #loginView #password .widget-wrap:focus-within{
  border-color:#E31E24 !important;box-shadow:0 0 0 3px rgba(227,30,36,.25) !important}
#loginView input{color:#EEF2F8 !important;background:transparent !important}
#loginView input::placeholder{color:#7C8BA1 !important}
#loginView .sprite-ico{border-color:rgba(255,255,255,.14) !important}

/* ricordami */
#loginView #remember-me .text{color:#9AA8BC !important}

/* pulsante */
#loginView #loginBtn .button-button{
  background:#E31E24 !important;border-color:#E31E24 !important;border-radius:8px !important;
  box-shadow:0 10px 24px -10px rgba(227,30,36,.8) !important;transition:background .2s !important;
}
#loginView #loginBtn .button-button:hover{background:#FF3B41 !important;border-color:#FF3B41 !important}
#loginView #loginBtn .button-text{color:#fff !important;font-weight:700 !important}
#loginView #forget .button-text{color:#9AA8BC !important}
#loginView #forget .button-text:hover{color:#EEF2F8 !important}

/* piè di pagina: via i link TP-Link, dentro i recapiti Kerria */
#loginView .bottom-container > *:not(.kerria-foot){display:none !important}
#loginView .bottom-container{height:auto !important}
.kerria-foot{width:100%;text-align:center;color:#8494AA;font-size:12.5px;line-height:1.75;padding:6px 12px 10px}
.kerria-foot a{color:#C9D3E0 !important;text-decoration:none !important}
.kerria-foot a:hover{color:#fff !important}

/* banner cookie */
.privacy-popover{background:rgba(10,20,38,.97) !important;border-top:1px solid rgba(255,255,255,.1) !important}
.privacy-popover .text-outer{flex:1 1 auto !important;min-width:0 !important;width:auto !important;max-width:none !important}
#privacy-agree-btn .button-button{background:#E31E24 !important;border-color:#E31E24 !important;border-radius:8px !important}
.privacy-popover a.link, #privacy-details-btn .button-text{color:#FF8A8E !important}
@media (max-width:700px){
  .privacy-popover{flex-direction:column !important;align-items:stretch !important;height:auto !important;padding:18px 16px !important}
  .privacy-popover .text-outer{width:100% !important;height:auto !important}
  .privacy-popover .opt-btns{width:100% !important;justify-content:flex-end !important}
  #loginView .kerria-sub{white-space:normal;padding:0 16px}
}

/* --- Logo Kerria DENTRO il pannello ---
   Omada disegna il proprio logo tramite la variabile CSS --omada-logo.
   La reindirizziamo al logo Kerria: si sostituisce ovunque usando il loro stesso
   sistema. Metodo sicuro: se un aggiornamento cambiasse tutto, riapparirebbe il
   logo Omada, senza rompere il layout. */
:root{--omada-logo:url(/kerria/logo-white.png) !important}
.logo-omada, .logo-icon.logo-omada{
  background:var(--omada-logo) center/contain no-repeat !important;
  width:150px !important;
}
.logo-wrapper .omada{
  background-image:var(--omada-logo) !important;
  background-size:contain !important;
  width:150px !important;
}
.logo-wrapper .line{display:none !important}

/* --- Barra superiore del pannello: blu navy Kerria (come la pagina di login).
   Gli accenti (pulsanti, voci attive, focus) li porta al rosso Kerria lo script,
   riscrivendo le variabili di tema di Omada. */
.header__central{background:#0A1426 !important}
.site__header .header, .site__header .header__status{background:#0A1426 !important}
/* Hotspot Manager: la sua barra usa header__all__* (verde/teal a destra) */
.header__all, .header__all__left, .header__all__right{background:#0A1426 !important}
/* Avatar utente: icona bianca pulita al posto dell'illustrazione con il verde */
.action-btn.action-account{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23ffffff'%3E%3Ccircle%20cx='12'%20cy='8'%20r='4'/%3E%3Cpath%20d='M4%2020c0-4.4%203.6-7%208-7s8%202.6%208%207v1H4z'/%3E%3C/svg%3E") !important;
  background-size:20px 20px !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* Stati "ok/successo" che ereditano il colore dal tema: forzati in verde,
   così restano leggibili (rosso significherebbe errore). */
:root{
  --s-color-tag-background-success-deep:#18B782 !important;
  --s-color-tag-background-success-pale:rgba(24,183,130,.10) !important;
  --s-color-tag-text-success-pale:#18B782 !important;
  --s-color-theme-status-success:#18B782 !important;
}