/* Nahla admin login – brand colors
   Primary: Deep Moss Green #2A6B52 (RGB 42,107,82)
   Secondary: Soft Leaf Green #A7D8B0, Laurel Green #98B68F, Middle Green #4E8B4E
   Neutrals: White #FFFFFF, Dirty White #EDECEC
*/

:root {
  --moss: #2A6B52;
  --moss-700: #245c47;
  --leaf: #A7D8B0;
  --laurel: #98B68F;
  --middle: #4E8B4E;
  --dirty-white: #EDECEC;
  --white: #FFFFFF;
  --text: #0f172a;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: linear-gradient(135deg, var(--dirty-white) 0%, #f7faf7 60%, #eef7f0 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hexagon-container { position: fixed; inset: 0; pointer-events: none; }
.hexagon {
  position: absolute; width: 120px; height: 138px; opacity: .08;
  background: var(--moss);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: float 14s ease-in-out infinite;
}
.hexagon:nth-child(1){ top:8%; left:12%; }
.hexagon:nth-child(2){ top:18%; left:78%; animation-delay:1s; }
.hexagon:nth-child(3){ top:62%; left:18%; animation-delay:2s; }
.hexagon:nth-child(4){ top:72%; left:70%; animation-delay:3s; }
.hexagon:nth-child(5){ top:38%; left:30%; animation-delay:4s; }
.hexagon:nth-child(6){ top:30%; left:58%; animation-delay:5s; }
.hexagon:nth-child(7){ top:82%; left:42%; animation-delay:6s; }
.hexagon:nth-child(8){ top:50%; left:90%; animation-delay:7s; }

@keyframes float { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } }

.login-container{
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  background: var(--white); border-radius: 16px;
  padding: 32px; box-shadow: 0 24px 60px rgba(0,0,0,.15);
  border: 1px solid rgba(42,107,82,.12);
}
.login-header{ text-align:center; margin-bottom: 20px; }
.logo{ width:84px; height:84px; margin: 0 auto 8px; }
.honeycomb{ fill: var(--leaf); filter: drop-shadow(0 0 10px rgba(167,216,176,.6)); }
h1{ margin: 8px 0 2px; font-size: 28px; font-weight: 700; color: var(--moss); }
p{ margin: 0; color: #334155; }

.login-form{ display:flex; flex-direction:column; gap: 16px; }
.form-group{ display:flex; flex-direction:column; gap:8px; }
label{ font-size: 14px; color:#475569; }
.input-container{ position:relative; }
.input-icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; stroke: var(--moss); stroke-width:2; fill:none;
}
input[type="email"], input[type="password"]{
  width:100%; padding: 12px 12px 12px 42px;
  border-radius: 10px; border: 2px solid #dbe7df; font-size:16px;
  transition: border-color .2s, box-shadow .2s;
}
input[type="email"]:focus, input[type="password"]:focus{
  outline:none; border-color: var(--moss);
  box-shadow: 0 0 0 4px rgba(42,107,82,.15);
}

.form-options{ display:flex; align-items:center; justify-content:space-between; }
.remember-me{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.forgot-password{ color: var(--moss); text-decoration:none; font-weight:500; }
.forgot-password:hover{ text-decoration:underline; }

button{
  appearance:none; border:none; border-radius:10px;
  background: linear-gradient(135deg, var(--moss) 0%, var(--middle) 100%);
  color: #fff; padding: 14px; font-weight:700; cursor:pointer;
  transition: transform .12s ease, filter .12s ease;
}
button:hover{ transform: translateY(-1px); filter: brightness(1.03); }
button:active{ transform: translateY(0); }

.footer{ margin-top: 12px; text-align:center; color:#6b7280; font-size: 13px; }

/* small screens */
@media (max-width: 480px){
  .login-container{ margin: 24px; padding: 24px; }
}

/* Toast styles */
.toast{
  position: fixed; top: 20px; right: 20px; z-index: 50;
  min-width: 260px; max-width: 360px; padding: 14px 16px;
  border-radius: 12px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15); transform: translateY(-16px);
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity: 1; transform: translateY(0); }
.toast-error{ background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.toast-success{ background: #dcfce7; color: #065f46; border: 1px solid #bbf7d0; }
.toast-content{ display:flex; flex-direction:column; line-height:1.2; }
.toast-title{ font-weight: 700; }
.toast-message{ font-size: 14px; }
.toast-close{ margin-left:auto; background: transparent; color: inherit; border:0; font-size:18px; cursor:pointer; }