@import url("theme.css");

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--brand-gray-800);background:#edf1ee}
html{overflow-x:hidden}
body{overflow-x:hidden}
button,input{font:inherit}
a{color:inherit}

/*
  Responsive rule for the homologation baseline:
  - No fixed canvas size.
  - Desktop uses two fluid columns.
  - Narrow windows switch to one column automatically.
  - Vertical spacing also compresses when browser height is reduced.
*/
.login-page{
  min-height:100vh;
  min-height:100dvh;
  padding:clamp(10px,1.5vw,24px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 16% 0%,#fff 0,#f4f6f5 46%,#e7ede9 100%);
}
.login-shell{
  width:min(1540px,100%);
  min-height:min(900px,calc(100dvh - clamp(20px,3vw,48px)));
  display:grid;
  grid-template-columns:minmax(360px,36%) minmax(0,64%);
  background:#fff;
  border:1px solid rgba(27,50,35,.07);
  border-radius:clamp(16px,1.4vw,24px);
  overflow:hidden;
  box-shadow:0 28px 80px rgba(17,37,24,.14);
}

/* LEFT / LOGIN */
.login-panel{
  position:relative;
  background:#fff;
  padding:clamp(26px,3.1vw,52px) clamp(24px,3.2vw,54px) clamp(22px,2.4vw,38px);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.login-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.brand-logo{width:min(285px,72%);height:auto;max-height:88px;object-fit:contain;object-position:left center}
.help-link{display:inline-flex;align-items:center;gap:7px;font-weight:760;font-size:13px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;margin-top:8px}
.help-icon{width:21px;height:21px;border:1.7px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:12px;text-decoration:none}
.login-copy{margin-top:clamp(34px,6vh,70px);max-width:490px}
.login-copy h1{font-size:clamp(25px,2vw,33px);line-height:1.12;letter-spacing:-.035em;margin:0 0 14px;color:#1c2420}
.login-copy p{font-size:clamp(13px,1vw,16px);line-height:1.58;color:var(--brand-gray-600);margin:0;max-width:460px}
.login-form{margin-top:clamp(24px,4.5vh,44px);max-width:500px}
.login-field{position:relative;display:block;margin-bottom:15px}
.login-field input{width:100%;height:clamp(54px,4.2vw,64px);border:1px solid #c1c9c4;border-radius:13px;background:#fff;outline:none;padding:0 52px 0 52px;font-size:15px;color:#222b26;transition:.15s ease}
.login-field input::placeholder{color:#8b9690}
.login-field input:focus{border-color:var(--brand-primary);box-shadow:0 0 0 4px rgba(55,173,22,.10)}
.field-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:21px;height:21px;stroke:#36423c;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:0;background:transparent;width:38px;height:38px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.password-toggle:hover{background:var(--brand-gray-100)}
.password-toggle svg{width:20px;height:20px;stroke:#46514c;fill:none;stroke-width:1.8}
.login-button{width:100%;height:clamp(54px,4vw,60px);border:0;border-radius:999px;background:linear-gradient(90deg,#30a90f,var(--brand-primary));color:#fff;font-size:18px;font-weight:850;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:18px;box-shadow:0 12px 25px rgba(55,173,22,.20);transition:.16s ease}
.login-button:hover{transform:translateY(-1px);background:linear-gradient(90deg,var(--brand-primary),var(--brand-primary-hover));box-shadow:0 16px 30px rgba(55,173,22,.25)}
.login-button svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.forgot{display:inline-block;margin-top:22px;font-weight:760;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.login-foot{margin-top:auto;padding-top:28px;color:#7d8882;font-size:11.5px}
.login-error{display:none;margin:0 0 12px;padding:9px 11px;border-radius:10px;background:#fff2f2;border:1px solid #f1caca;color:#a54040;font-size:12px}
.login-error.show{display:block}

/* RIGHT / SUPERPORTAL */
.hero{position:relative;min-width:0;overflow:hidden;background:linear-gradient(135deg,#2f9f14 0%,var(--brand-primary) 43%,#16870e 100%);color:#fff;padding:clamp(30px,3.3vw,56px);isolation:isolate}
.hero-orb{position:absolute;border-radius:50%;background:rgba(255,255,255,.12);z-index:-1}
.hero-orb-a{width:min(42vw,520px);aspect-ratio:1;right:-18%;top:-30%}
.hero-orb-b{width:min(35vw,430px);aspect-ratio:1;right:12%;bottom:-34%;background:rgba(0,76,18,.10)}
.hero-dots{position:absolute;right:28px;top:28px;width:76px;height:76px;opacity:.64;background-image:radial-gradient(circle,#fff 1.35px,transparent 1.7px);background-size:11px 11px}
.hero-content{position:relative;z-index:4;width:min(650px,66%);min-height:100%;display:flex;flex-direction:column;align-items:flex-start}
.hero-kicker{display:flex;align-items:center;gap:14px;letter-spacing:.22em;text-transform:uppercase;font-size:10px;font-weight:800;color:#fff}
.hero-kicker::before{content:"";width:36px;height:2px;border-radius:99px;background:#fff}
.hero-title{font-size:clamp(34px,3.2vw,54px);line-height:1.06;letter-spacing:-.045em;margin:clamp(26px,5vh,52px) 0 0;font-weight:860;max-width:620px}
.hero-title span{color:#102b12}.hero-title strong{color:#fff;font-weight:900}
.hero-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(26px,4.3vh,42px);width:min(620px,100%)}
.feature{padding:0 12px;border-right:1px solid rgba(255,255,255,.22);min-width:0}.feature:first-child{padding-left:0}.feature:last-child{border-right:0}.feature svg{width:31px;height:31px;stroke:#fff;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.feature b{display:block;font-size:12px;margin-top:8px;line-height:1.15}.feature span{display:block;font-size:10px;line-height:1.3;margin-top:3px;color:rgba(255,255,255,.86)}
.hero-callout{margin-top:clamp(22px,4vh,36px);width:min(440px,100%);border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.11);backdrop-filter:blur(10px);border-radius:20px;padding:17px 20px;display:flex;gap:14px;align-items:flex-start}.hero-callout svg{width:34px;height:34px;stroke:#fff;fill:none;stroke-width:1.7;flex:0 0 auto}.hero-callout b{display:block;font-size:14px}.hero-callout p{margin:5px 0 0;font-size:12px;line-height:1.42;color:rgba(255,255,255,.88)}

/* Copyright-safe art built only with HTML/CSS. */
.admin-visual{position:absolute;z-index:2;right:clamp(-36px,-1.5vw,-8px);bottom:clamp(-24px,-1.5vw,-8px);width:min(48%,570px);height:72%;pointer-events:none}
.visual-back{position:absolute;inset:5% 4% 10% 14%;border:1px solid rgba(255,255,255,.35);border-radius:58px 58px 28px 28px;transform:skewX(-8deg);background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.03));box-shadow:inset 0 0 40px rgba(255,255,255,.07)}
.visual-window{position:absolute;right:0;bottom:9%;width:88%;height:66%;border-radius:28px;background:rgba(249,255,250,.92);box-shadow:0 30px 55px rgba(3,70,19,.27);display:grid;grid-template-columns:19% 1fr;overflow:hidden;transform:perspective(850px) rotateY(-7deg)}
.visual-sidebar{background:linear-gradient(180deg,#1f5d2a,#11391a);padding:24px 13px;display:flex;flex-direction:column;gap:15px}.visual-sidebar::before{content:"H";width:34px;height:34px;border-radius:50%;border:2px solid #65d54d;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:900;margin-bottom:6px}.visual-sidebar span{height:6px;border-radius:999px;background:rgba(255,255,255,.24)}.visual-sidebar span:nth-child(2){width:66%}.visual-sidebar span:nth-child(3){width:78%}.visual-sidebar span:nth-child(4){width:58%}.visual-sidebar span:nth-child(5){width:72%}
.visual-main{padding:22px 20px;background:linear-gradient(145deg,#fafffa,#eaf5eb)}.visual-head{display:flex;gap:6px}.visual-head i{width:7px;height:7px;border-radius:50%;background:#9fc4a2}.visual-dashboard-title{width:43%;height:9px;border-radius:99px;background:#cfe4d2;margin:22px 0 17px}.visual-grid{height:calc(100% - 55px);display:grid;grid-template-columns:1.4fr .85fr;grid-template-rows:1.2fr .8fr;gap:11px}.chart-card,.donut-card,.bar-card,.mini-card{border-radius:15px;background:rgba(255,255,255,.94);border:1px solid #dce9de;box-shadow:0 8px 22px rgba(28,83,37,.06)}
.chart-card{position:relative;overflow:hidden}.line-chart{position:absolute;left:11%;right:9%;bottom:18%;height:48%;border-bottom:2px solid #dbe8dc}.line-chart::before{content:"";position:absolute;left:2%;right:3%;top:52%;height:3px;background:#37ad16;transform:skewY(-10deg);box-shadow:42px -13px 0 -1px #37ad16,82px 3px 0 -1px #37ad16,123px -22px 0 -1px #37ad16}.line-chart i{position:absolute;width:7px;height:7px;border:2px solid #37ad16;border-radius:50%;background:#fff;bottom:47%}.line-chart i:nth-child(1){left:1%}.line-chart i:nth-child(2){left:24%;bottom:62%}.line-chart i:nth-child(3){left:48%;bottom:44%}.line-chart i:nth-child(4){left:72%;bottom:70%}.line-chart i:nth-child(5){right:0;bottom:82%}
.donut-card{display:grid;place-items:center}.donut{width:58%;aspect-ratio:1;border-radius:50%;background:conic-gradient(#37ad16 0 68%,#d6ead8 68% 100%);position:relative}.donut::after{content:"";position:absolute;inset:25%;border-radius:50%;background:#fff}
.bar-card{display:flex;align-items:flex-end;justify-content:center;gap:9px;padding:20px}.bar-card span{width:18%;background:linear-gradient(#53c536,#2d9d17);border-radius:6px 6px 3px 3px}.bar-card span:nth-child(1){height:36%}.bar-card span:nth-child(2){height:60%}.bar-card span:nth-child(3){height:82%}.mini-card{padding:19px 16px;display:flex;flex-direction:column;gap:9px}.mini-card i{height:7px;border-radius:99px;background:#d9e7da}.mini-card i:nth-child(1){width:78%}.mini-card i:nth-child(2){width:55%}.mini-card i:nth-child(3){width:68%}
.float-card{position:absolute;border-radius:18px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.88);box-shadow:0 18px 35px rgba(15,75,28,.18);display:grid;grid-template-columns:44px 1fr;grid-template-rows:1fr 1fr;gap:4px 10px;padding:15px 16px}.float-card span{height:7px;border-radius:99px;background:#cbdcca}.float-icon{grid-row:1/3;width:40px;height:40px;border-radius:12px;background:#e9f6e8;color:#37ad16;display:grid;place-items:center;font-size:18px}.float-users{right:5%;top:17%;width:190px}.float-report{left:7%;bottom:3%;width:180px}.mini-donut{grid-row:1/3;width:40px;height:40px;border-radius:50%;background:conic-gradient(#37ad16 0 72%,#d8ead8 72%);position:relative}.mini-donut::after{content:"";position:absolute;inset:28%;border-radius:50%;background:white}.float-tile{position:absolute;right:4%;bottom:0;width:74px;height:74px;border-radius:18px;background:linear-gradient(145deg,#53c637,#279c12);display:grid;place-items:center;font-size:32px;color:#fff;box-shadow:0 18px 34px rgba(21,102,35,.23)}

/* Compact desktop / notebook width */
@media (max-width:1280px) and (min-width:961px){
  .login-page{padding:0}
  .login-shell{width:100%;min-height:100dvh;border-radius:0;border:0;grid-template-columns:minmax(340px,40%) minmax(0,60%)}
  .login-panel{padding:30px 34px 25px}
  .brand-logo{width:min(245px,70%)}
  .login-copy{margin-top:34px}.login-form{margin-top:27px}
  .hero{padding:34px 34px}.hero-content{width:70%}.hero-title{font-size:clamp(34px,3.7vw,46px);margin-top:30px}.hero-features{margin-top:26px}.hero-callout{margin-top:24px}
  .admin-visual{width:43%;height:67%}
}

/* Height-aware compression when a desktop window is made shorter. */
@media (min-width:961px) and (max-height:800px){
  .login-page{padding:0}
  .login-shell{width:100%;min-height:100dvh;border-radius:0;border:0}
  .login-panel{padding-top:24px;padding-bottom:20px}
  .brand-logo{max-height:67px;width:min(240px,70%)}
  .login-copy{margin-top:24px}.login-copy h1{font-size:25px;margin-bottom:9px}.login-copy p{font-size:13.5px;line-height:1.45}
  .login-form{margin-top:21px}.login-field{margin-bottom:11px}.login-field input{height:52px}.login-button{height:52px;font-size:16px}.forgot{margin-top:15px}.login-foot{padding-top:18px}
  .hero{padding-top:26px;padding-bottom:26px}.hero-title{margin-top:22px;font-size:clamp(32px,3.1vw,43px)}.hero-features{margin-top:22px}.hero-callout{margin-top:19px;padding:14px 17px}.feature svg{width:27px;height:27px}.feature b{font-size:11.5px}.feature span{font-size:9.3px}
  .admin-visual{height:66%}
}

/* Tablet / narrow browser window: layout changes immediately while resizing. */
@media(max-width:960px){
  .login-page{padding:0;align-items:stretch;background:#fff}
  .login-shell{width:100%;min-height:100dvh;grid-template-columns:1fr;border:0;border-radius:0;box-shadow:none;overflow:visible}
  .login-panel{min-height:auto;padding:28px max(24px,7vw) 28px}
  .login-top,.login-copy,.login-form,.login-foot{width:min(580px,100%);margin-left:auto;margin-right:auto}
  .login-copy{margin-top:34px}.login-form{margin-top:28px}.login-foot{margin-top:36px;padding-top:0;text-align:center}
  .hero{min-height:360px;padding:30px max(24px,7vw);order:2}
  .hero-content{width:62%;min-height:300px}.hero-title{font-size:clamp(31px,5.2vw,42px);margin-top:26px}.hero-features,.hero-callout{display:none}
  .admin-visual{width:42%;height:88%;bottom:-8%;right:0}.float-card,.float-tile{display:none}
}

/* Phone */
@media(max-width:620px){
  .login-panel{padding:22px 18px 24px}
  .login-top{align-items:center}.brand-logo{width:min(230px,68%);max-height:70px}.help-link{font-size:12px;margin-top:0}.help-icon{width:19px;height:19px}
  .login-copy{margin-top:30px}.login-copy h1{font-size:26px}.login-copy p{font-size:14px}.login-form{margin-top:24px}.login-field input{height:56px;font-size:14px}.login-button{height:56px;font-size:17px}.forgot{margin-top:20px}.login-foot{font-size:10.5px}
  .hero{min-height:240px;padding:22px 20px}.hero-dots{right:12px;top:12px;transform:scale(.72);transform-origin:top right}.hero-kicker{font-size:8.5px}.hero-title{font-size:clamp(25px,8.3vw,34px);margin-top:20px;max-width:78%}
  .admin-visual{width:52%;height:90%;right:-8%;bottom:-18%}.visual-back{display:none}.visual-window{height:62%;border-radius:18px;grid-template-columns:17% 1fr}.visual-main{padding:12px 10px}.visual-sidebar{padding:13px 7px;gap:8px}.visual-sidebar::before{width:21px;height:21px;font-size:9px}.visual-dashboard-title{margin:12px 0 9px}.visual-grid{gap:6px}
}

@media(max-width:390px){
  .brand-logo{width:205px}.login-panel{padding-left:16px;padding-right:16px}.login-copy h1{font-size:24px}.hero{min-height:215px}.hero-title{font-size:24px}.admin-visual{opacity:.72}
}

/* Very large desktop / 2K+ */
@media(min-width:1900px){
  .login-shell{width:min(1720px,92vw);min-height:min(960px,90dvh)}
  .login-panel{padding:58px 62px 44px}.brand-logo{width:320px}.login-copy{margin-top:78px}.login-copy h1{font-size:36px}.login-copy p{font-size:17px}.login-form{margin-top:48px;max-width:540px}.login-field input{height:68px;font-size:16px}.login-button{height:64px;font-size:19px}
  .hero{padding:58px 66px}.hero-title{font-size:58px}.hero-content{width:65%}.admin-visual{width:48%;height:75%}
}