/* ============================================================
   Grapevine Manage — custom login styling
   Loaded ONLY on the login page (linked from the login view),
   so plain .fi-* overrides here never leak to the rest of admin.
   ============================================================ */

:root{
  --gv-green:#3dbe6b; --gv-green-bright:#5fe08c; --gv-green-deep:#16713e;
  --gv-green-glow:rgba(95,224,140,.55);
  --gv-purple:#8A3D71; --gv-purple-lt:#c25a9c; --gv-purple-deep:#552546;
  --gv-purple-glow:rgba(138,61,113,.5);
  --gv-ink:#0c1a11;
}

/* fonts (relative to /public/login/) */
@font-face{font-family:'GV Bebas';src:url('fonts/BebasNeue.ttf') format('truetype');font-display:swap}
@font-face{font-family:'GV Archivo';src:url('fonts/Archivo.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'GV Caveat';src:url('fonts/Caveat.ttf') format('truetype');font-weight:400 700;font-display:swap}

/* ---- reset Filament's centered simple-page shell so we can go full-bleed ---- */
html,body{min-height:100vh}
.fi-simple-layout{display:block!important;min-height:100vh;margin:0!important;padding:0!important}
.fi-simple-main-ctn{display:block!important;min-height:100vh;width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
.fi-simple-main{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;border:none!important;border-radius:0!important}

/* ============================== HERO / BACKGROUND ============================== */
.gv-login{font-family:'GV Archivo',sans-serif;color:#fff;position:relative}
.gv-login .bg{position:fixed;inset:0;z-index:0;background-image:url('background-image-admin-login-v11-21.jpg');background-size:cover;background-position:72% 26%;transform:scale(1.06);animation:gv-kenburns 40s ease-in-out infinite alternate}
@keyframes gv-kenburns{0%{transform:scale(1.06) translate(0,0)}100%{transform:scale(1.13) translate(-1.5%,-1.5%)}}
.gv-login .bg-wash{position:fixed;inset:0;z-index:1;background:linear-gradient(100deg,rgba(3,12,7,.86) 0%,rgba(4,16,10,.55) 30%,rgba(5,20,12,.20) 52%,rgba(5,18,11,.28) 72%,rgba(4,14,9,.50) 100%)}
.gv-login .bg-tint{position:fixed;inset:0;z-index:1;background:radial-gradient(90% 80% at 50% 40%,transparent 45%,rgba(4,12,8,.45) 100%),linear-gradient(180deg,rgba(34,113,62,.12),transparent 28%,rgba(4,12,8,.40))}
.gv-login .grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:gv-grain 6s steps(6) infinite}
@keyframes gv-grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-3%)}60%{transform:translate(-2%,2%)}80%{transform:translate(2%,-1%)}}
.gv-login .vignette{position:fixed;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 240px 60px rgba(0,0,0,.65)}

.gv-login .stage{position:relative;z-index:5;min-height:100vh;width:100%;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,600px) minmax(0,420px);justify-content:center;align-items:center;padding:clamp(24px,4vw,56px);gap:clamp(30px,4.5vw,72px)}

.gv-login .hero{max-width:600px;opacity:0;animation:gv-rise .9s .15s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes gv-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.gv-login .wordmark{margin-bottom:26px}
.gv-login .wordmark .top{font-family:'GV Bebas',sans-serif;font-size:clamp(50px,6.6vw,92px);line-height:.82;letter-spacing:clamp(2px,.5vw,5px);color:#fff;text-shadow:0 4px 36px rgba(0,0,0,.5)}
.gv-login .wordmark .sub{font-family:'GV Bebas',sans-serif;letter-spacing:clamp(9px,1.6vw,18px);font-size:clamp(22px,2.5vw,34px);color:var(--gv-green-bright);text-transform:uppercase;padding-left:clamp(3px,.5vw,5px);margin-top:2px}

.gv-login .tagline{font-size:clamp(17px,1.7vw,22px);line-height:1.5;font-weight:500;color:rgba(255,255,255,.9);max-width:32ch;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.gv-login .tagline b{color:var(--gv-green-bright);font-weight:700}
.gv-login .locale{font-size:13px;letter-spacing:3px;color:rgba(255,255,255,.6);text-transform:uppercase;margin-top:14px}
.gv-login .locale b{color:var(--gv-green-bright);font-weight:700;margin:0 3px}

.gv-login .family{margin-top:28px}
.gv-login .family .lbl{font-size:11px;letter-spacing:3.5px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.gv-login .family .lbl::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(255,255,255,.16),transparent)}
.gv-login .brands{display:flex;gap:clamp(18px,2.2vw,32px);flex-wrap:wrap;align-items:flex-end}
.gv-login .brand{display:flex;flex-direction:column;align-items:center;gap:9px;opacity:.82;transition:.3s;animation:gv-rise .8s both}
.gv-login .brand:nth-child(1){animation-delay:.7s}.gv-login .brand:nth-child(2){animation-delay:.79s}.gv-login .brand:nth-child(3){animation-delay:.88s}.gv-login .brand:nth-child(4){animation-delay:.97s}.gv-login .brand:nth-child(5){animation-delay:1.06s}
.gv-login .brand:hover{opacity:1;transform:translateY(-4px)}
.gv-login .brand img{height:46px;width:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}
.gv-login .brand span{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.66)}
/* Isaac — real animated network mark */
.gv-login .brand.isaac{margin:0 4px}
.gv-login .brand.isaac .net{width:70px;height:70px;overflow:visible;animation:gv-halo 4s ease-in-out infinite}
.gv-login .brand.isaac .link{stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.5}
.gv-login .brand.isaac .hub{fill:#fff}
.gv-login .brand.isaac .sat{fill:#fff}
.gv-login .brand.isaac .power-icon{fill:none;stroke:var(--gv-green-deep);stroke-width:5;stroke-linecap:round}
.gv-login .brand.isaac span{color:var(--gv-green-bright);font-weight:700}
@keyframes gv-halo{0%,100%{filter:drop-shadow(0 0 4px var(--gv-green-glow))}50%{filter:drop-shadow(0 0 16px var(--gv-green-glow))}}

.gv-login .quote{margin-top:22px;opacity:0;animation:gv-rise 1s 1.1s forwards}
.gv-login .quote p{font-family:'GV Caveat',cursive;font-weight:600;font-size:clamp(22px,2.5vw,33px);line-height:1.12;color:rgba(255,255,255,.24);text-shadow:0 1px 2px rgba(0,0,0,.22)}
.gv-login .quote .sig{font-family:'GV Caveat',cursive;font-weight:700;font-size:clamp(18px,1.9vw,25px);color:rgba(255,255,255,.32);display:block;margin-top:2px}

/* ============================== CARD ============================== */
.gv-login .card-wrap{display:flex;justify-content:center;opacity:0;animation:gv-rise .9s .35s cubic-bezier(.2,.7,.2,1) forwards}
.gv-login .card{width:min(420px,100%);background:linear-gradient(180deg,rgba(12,22,16,.44),rgba(10,18,13,.37));backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:38px 36px 30px;box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.13)}
.gv-login .card h2{font-family:'GV Bebas',sans-serif;font-size:40px;letter-spacing:1px;line-height:1;color:#fff}
.gv-login .card .welcome{color:rgba(255,255,255,.62);font-size:14px;margin:6px 0 24px}

/* ============================== FILAMENT FORM OVERRIDES ==============================
   These restyle Filament's real form (rendered by {{ $this->content }}) to match the
   mockup. Class names are v4 fi-* selectors; if a future Filament update renames them,
   these are the lines to revisit. */
.gv-login .fi-input,
.gv-login .fi-btn,
.gv-login .fi-fo-field-wrp{font-family:'GV Archivo',sans-serif}

/* labels */
.gv-login .fi-fo-field-wrp-label,
.gv-login .fi-fo-field-wrp-label *{color:rgba(255,255,255,.74)!important;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600}

/* text inputs */
.gv-login .fi-input-wrp{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:none!important;border-radius:12px!important;--tw-ring-color:transparent!important}
.gv-login .fi-input-wrp:focus-within{border-color:var(--gv-green-bright)!important;box-shadow:0 0 0 3px rgba(95,224,140,.18)!important;background:rgba(255,255,255,.12)!important}
.gv-login .fi-input{color:#fff!important;background:transparent!important;padding-top:.78rem!important;padding-bottom:.78rem!important}
.gv-login .fi-input::placeholder{color:rgba(255,255,255,.4)!important}
/* password reveal / any icon button inside an input */
.gv-login .fi-input-wrp .fi-icon-btn,
.gv-login .fi-input-wrp button{color:rgba(255,255,255,.55)!important}
.gv-login .fi-input-wrp .fi-icon-btn:hover{color:#fff!important}

/* remember-me checkbox + its label text */
.gv-login .fi-checkbox-input{border-color:rgba(255,255,255,.42)!important;background:rgba(255,255,255,.06)!important}
.gv-login .fi-checkbox-input:checked{background:var(--gv-green)!important;border-color:var(--gv-green)!important}
.gv-login .fi-fo-checkbox .fi-fo-field-wrp-label,
.gv-login .fi-fo-checkbox label,
.gv-login .fi-fo-checkbox label *{text-transform:none!important;letter-spacing:0!important;font-size:14px!important;color:rgba(255,255,255,.85)!important;font-weight:500!important}

/* hints / links (forgot password, etc., if enabled) */
.gv-login .fi-link,
.gv-login a.fi-link{color:var(--gv-green-bright)!important}

/* the Sign-in submit button → purple marketing gradient */
.gv-login .fi-btn{background:linear-gradient(135deg,var(--gv-purple-lt) 0%,var(--gv-purple) 46%,var(--gv-purple-deep) 100%)!important;color:#fff!important;border:none!important;box-shadow:0 10px 28px var(--gv-purple-glow),inset 0 1px 0 rgba(255,255,255,.25)!important;font-weight:700;letter-spacing:.4px;padding-top:.85rem!important;padding-bottom:.85rem!important;transition:.25s}
.gv-login .fi-btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(138,61,113,.6),inset 0 1px 0 rgba(255,255,255,.3)!important}
.gv-login .fi-btn .fi-btn-label{color:#fff!important}

/* validation error text stays readable on the dark card */
.gv-login .fi-fo-field-wrp-error-message{color:#fda4af!important}

/* spacing between fields inside the card */
.gv-login .card .fi-fo-component-ctn,
.gv-login .card form > div{gap:18px}

/* ============================== RESPONSIVE ============================== */
@media (max-width:980px){
  .gv-login .stage{grid-template-columns:1fr;align-items:start;padding:40px 22px 60px;gap:32px}
  .gv-login .hero{order:1;max-width:560px;margin:0 auto;text-align:center}
  .gv-login .tagline,.gv-login .family,.gv-login .quote{margin-left:auto;margin-right:auto}
  .gv-login .tagline{max-width:34ch}
  .gv-login .brands{justify-content:center}
  .gv-login .family .lbl{justify-content:center}
  .gv-login .family .lbl::after{display:none}
  .gv-login .card-wrap{order:2}
}
@media (max-width:480px){
  .gv-login .brands{gap:14px}
  .gv-login .brand img{height:38px}
  .gv-login .brand.isaac .net{width:54px;height:54px}
  .gv-login .card{padding:30px 24px}
}