/* Material Design Login Form - Scoped for /login.html */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
  background: #0b2b29; /* deep teal/green */
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(20,184,166,0.18), transparent 42%),
    radial-gradient(circle at 80% 30%, rgba(13,148,136,0.16), transparent 46%),
    radial-gradient(circle at 30% 80%, rgba(4,120,87,0.12), transparent 50%),
    linear-gradient(135deg, rgba(5,46,45,0.85), rgba(2,24,22,0.7));
  filter: blur(22px);
  transform: scale(1.08);
  z-index: -2;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(2, 24, 22, 0.45);
  backdrop-filter: blur(12px);
  z-index: -1;
}
.login-container { width:100%; max-width:400px; }
.login-card { background:#fff; border-radius:8px; padding:48px 40px 36px; box-shadow:0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.1); position:relative; overflow:hidden; }
.login-card:hover { box-shadow:0 4px 8px rgba(0,0,0,.12), 0 12px 28px rgba(0,0,0,.15); }
.login-header { text-align:center; margin-bottom:32px; }
.brand-logo { margin-bottom: 20px; display:flex; justify-content:center; }
/* Mascot should stand alone (no square tile) */
.brand-logo img { width:64px; height:auto; border-radius:0; box-shadow:none; background: transparent; }
.login-header h2 { color:#212121; font-size:1.5rem; font-weight:400; margin-bottom:8px; letter-spacing:.15px; }
.login-header p { color:#757575; font-size:14px; }

.form-group { margin-bottom:24px; position:relative; }
.input-wrapper { position:relative; display:flex; flex-direction:column; }
.input-wrapper input { background:transparent; border:none; border-bottom:2px solid #e0e0e0; padding:16px 0 8px; color:#212121; font-size:16px; outline:0; width:100%; z-index:3; }
.input-wrapper input:focus { border-bottom-color:#0d9488; }
.input-wrapper input:focus + label,
.input-wrapper input:valid + label,
.input-wrapper.has-value label { transform: translateY(-24px) scale(.75); color:#0d9488; font-weight:500; }
.input-wrapper label { position:absolute; left:0; top:16px; color:#757575; font-size:16px; transition:all .2s ease; pointer-events:none; transform-origin:left top; z-index:4; }
.input-line { position:absolute; bottom:0; left:0; width:0; height:2px; background:#14b8a6; transition:width .2s ease; z-index:5; }
.input-wrapper input:focus ~ .input-line { width:100%; }

/* Ensure autofilled fields float label and keep readable color */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important; box-shadow: 0 0 0px 1000px #ffffff inset !important; -webkit-text-fill-color: #212121 !important; }
.input-wrapper input:-webkit-autofill + label { transform: translateY(-24px) scale(.75); color:#1976d2; font-weight:500; }
.ripple-container { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.ripple { position:absolute; border-radius:50%; background: rgba(13,148,136,.2); transform:scale(0); animation:ripple-animation .6s linear; pointer-events:none; }
@keyframes ripple-animation { to { transform: scale(4); opacity: 0; } }

.password-wrapper { position:relative; }
.password-wrapper input { padding-right:56px; }
.password-toggle { position:absolute; right:0; top:50%; transform:translateY(-50%); background:transparent; border:none; cursor:pointer; padding:8px; color:#757575; border-radius:50%; width:40px; height:40px; display:flex; align-items:center; justify-content:center; overflow:hidden; z-index:10; }
.password-toggle:hover { background: rgba(0,0,0,.04); color:#0d9488; }
.toggle-ripple { position:absolute; inset:0; border-radius:50%; overflow:hidden; z-index:1; }
.toggle-icon { display:block; width:20px; height:20px; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23757575' stroke-width='1.5'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'/%3e%3c/svg%3e"); background-size:contain; background-repeat:no-repeat; background-position:center; transition:background-image .2s ease; position:relative; z-index:2; flex-shrink:0; }
.password-toggle:hover .toggle-icon { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230d9488' stroke-width='1.5'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'/%3e%3c/svg%3e"); }
.toggle-icon.show-password { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23757575' stroke-width='1.5'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 11-4.243-4.243m4.242 4.242L9.88 9.88'/%3e%3c/svg%3e"); }
.password-toggle:hover .toggle-icon.show-password { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231976d2' stroke-width='1.5'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 11-4.243-4.243m4.242 4.242L9.88 9.88'/%3e%3c/svg%3e"); }

.form-options { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; flex-wrap:wrap; gap:16px; }
.checkbox-wrapper { display:flex; align-items:center; cursor:pointer; }
.checkbox-wrapper input[type=checkbox] { display:none; }
.checkbox-label { display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none; color:#424242; font-size:14px; }
.checkbox-material { position:relative; width:18px; height:18px; border:2px solid #757575; border-radius:2px; transition:all .2s ease; overflow:hidden; flex-shrink:0; }
.checkbox-wrapper input[type=checkbox]:checked + .checkbox-label .checkbox-material { background:#1976d2; border-color:#1976d2; }
.checkbox-ripple { position:absolute; inset:-12px; border-radius:50%; overflow:hidden; }
.checkbox-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:12px; height:12px; fill:#fff; opacity:0; transition:all .2s ease; }
.checkbox-wrapper input[type=checkbox]:checked + .checkbox-label .checkbox-icon { opacity:1; }
.checkbox-path { stroke-dasharray:16; stroke-dashoffset:16; transition: stroke-dashoffset .3s ease; }
.checkbox-wrapper input[type=checkbox]:checked + .checkbox-label .checkbox-path { stroke-dashoffset:0; }
.forgot-password { color:#1976d2; text-decoration:none; font-size:14px; font-weight:500; transition:color .2s ease; text-transform:uppercase; letter-spacing:.25px; }
.forgot-password:hover { color:#0d47a1; }

.material-btn { width:100%; background:#1976d2; border:0; border-radius:4px; padding:12px 24px; color:#fff; font-size:14px; font-weight:500; cursor:pointer; transition:all .2s ease; position:relative; margin-bottom:24px; text-transform:uppercase; letter-spacing:.25px; min-height:48px; overflow:hidden; box-shadow:0 2px 4px rgba(0,0,0,.2); }
.material-btn:hover { background:#1565c0; box-shadow:0 4px 8px rgba(0,0,0,.25); transform: translateY(-1px); }
.material-btn:active { transform: translateY(0); box-shadow:0 2px 4px rgba(0,0,0,.2); }
.btn-ripple { position:absolute; inset:0; overflow:hidden; }
.btn-text { position:relative; z-index:1; transition:opacity .2s ease; }
.btn-loader { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity:0; transition:opacity .2s ease; }
.loader-circle { width:20px; height:20px; animation: rotate 2s linear infinite; }
.loader-path { stroke-dasharray:90,150; stroke-linecap:round; animation: dash 1.5s ease-in-out infinite; }
@keyframes rotate { 100% { transform: rotate(360deg) } }
@keyframes dash { 0%{ stroke-dasharray:1,150; stroke-dashoffset:0 } 50%{ stroke-dasharray:90,150; stroke-dashoffset:-35 } 100%{ stroke-dasharray:90,150; stroke-dashoffset:-124 } }
.material-btn.loading .btn-text { opacity:0; }
.material-btn.loading .btn-loader { opacity:1; }

.divider { text-align:center; margin:24px 0; position:relative; }
.divider::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:#e0e0e0; transform:translateY(-50%); }
.divider span { background:#fff; color:#757575; padding:0 16px; font-size:14px; position:relative; z-index:1; }
.social-login { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.social-btn { background:#fff; border:1px solid #dadce0; border-radius:4px; padding:12px 16px; color:#3c4043; font-size:14px; font-weight:500; cursor:pointer; transition:all .2s ease; display:flex; align-items:center; justify-content:center; gap:12px; position:relative; overflow:hidden; min-height:48px; box-shadow:0 1px 2px rgba(0,0,0,.1); }
.social-btn:hover { box-shadow:0 2px 4px rgba(0,0,0,.15); transform: translateY(-1px); }
.social-ripple { position:absolute; inset:0; overflow:hidden; }
.social-icon { width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
.social-icon svg { width:100%; height:100%; }
.signup-link { text-align:center; }
.signup-link p { color:#757575; font-size:14px; }
.create-account { color:#1976d2; text-decoration:none; font-weight:500; transition:color .2s ease; }
.create-account:hover { color:#0d47a1; }
.error-message { color:#d32f2f; font-size:12px; margin-top:6px; opacity:0; transform:translateY(-8px); transition: all .2s ease; }
.error-message.show { opacity:1; transform: translateY(0); }
.form-group.error .input-wrapper input { border-bottom-color:#d32f2f; color:#d32f2f; }
.form-group.error .input-wrapper label { color:#d32f2f; }
.form-group.error .input-line { background:#d32f2f; }
.success-message { display:none; text-align:center; padding:32px 20px; opacity:0; transform:translateY(16px); transition: all .3s cubic-bezier(.25,.8,.25,1); }
.success-message.show { display:block; opacity:1; transform:translateY(0); }
.success-elevation { background:#fff; border-radius:8px; padding:24px; box-shadow:0 4px 8px rgba(0,0,0,.15); }
.success-icon { width:48px; height:48px; background:#4caf50; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; box-shadow:0 2px 4px rgba(76,175,80,.3); }
.success-icon svg { width:24px; height:24px; fill:#fff; }
.success-message h3 { color:#212121; font-size:1.25rem; margin-bottom:8px; }
.success-message p { color:#757575; font-size:14px; }

@media (max-width: 480px) {
  body { padding:16px; }
  .login-card { background:#fff; border-radius:8px; padding:48px 40px 36px; box-shadow:0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.1); position:relative; overflow:hidden; }
}
.login-card { background:#fff; border-radius:8px; padding:48px 40px 36px; box-shadow:0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.1); position:relative; overflow:hidden; }
html[data-theme="dark"] .login-card { background:#fff; border-radius:8px; padding:48px 40px 36px; box-shadow:0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.1); position:relative; overflow:hidden; }
html[data-theme="dark"] .login-card h2,
html[data-theme="dark"] .login-card p,
html[data-theme="dark"] .login-card label,
html[data-theme="dark"] .login-card .create-account,
html[data-theme="dark"] .login-card .forgot-password { color: var(--text); }
html[data-theme="dark"] .input-wrapper input { color: var(--text); border-bottom-color: #334155; }
html[data-theme="dark"] .input-wrapper input:focus { border-bottom-color: var(--primary); }

/* Close button (top-right) */
.close-login {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(20,184,166,0.35);
  background: rgba(2,24,22,0.35);
  color: #e5e7eb;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  cursor: pointer;
  z-index: 10;
}
.close-login:hover { background: rgba(13,148,136,0.25); border-color: rgba(20,184,166,0.6); }

/* --- AI Report Writer: sign-in tweaks (override) --- */
.brand-logo img { width: 96px; height:auto; }
.login-card { padding: 36px 28px 28px; }
.login-header { margin-bottom: 24px; }
.form-group { margin-bottom: 18px; }
.divider { margin: 18px 0; }
.social-login { margin-bottom: 18px; }

@media (max-width: 480px) {
  body { padding: 12px; }
  .login-card { padding: 24px 18px 18px; }
  .brand-logo img { width: 84px; }
}

@media (max-height: 700px) {
  .login-card { padding: 24px 18px 18px; }
  .login-header { margin-bottom: 18px; }
  .brand-logo img { width: 84px; }
  .form-group { margin-bottom: 14px; }
  .divider { margin: 14px 0; }
}

@media (max-height: 600px) {
  .login-container { max-width: 360px; }
  .login-card { padding: 18px 16px; }
  .login-header h2 { font-size: 1.25rem; }
  .login-header p { font-size: 13px; }
}