/* public/css/login.css */
/* Copy the full CSS variables and rules from your original login.php <style>.
   Below is a condensed but complete copy matching the classes used in blade. */

/* CSS design tokens */
:root {
  --primary-color: #0052CC;
  --primary-light:#0066FF;
  --secondary-color:#06D6A0;
  --bg-base:#E8ECEF;
  --white:#ffffff;
  --gray-300:#CED4DA;
  --danger:#DC3545;
  --success:#06D6A0;
  --warning:#FFB703;
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --radius-3xl: 2rem;
  --radius-full: 9999px;
  --space-4: 1rem;
}

/* Reset */
* { box-sizing: border-box; margin:0; padding:0; }
html,body { height:100%; font-family:var(--font-family); }

/* Body */
body {
  background: linear-gradient(135deg,var(--primary-color) 0%,var(--primary-light) 50%,var(--secondary-color) 100%);
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-4);
  min-height:100vh; color:#111827;
}

/* Container */
.login-container {
  display:flex; width:100%; max-width:1000px; min-height:550px;
  background:var(--bg-base); border-radius:var(--radius-3xl);
  overflow:hidden; box-shadow: -8px -8px 16px rgba(255,255,255,.8), 8px 8px 16px rgba(0,82,204,.2);
}

/* Left */
.login-form-section { flex:1; padding:3rem; display:flex; align-items:center; justify-content:center; }
.form-container { max-width:400px; width:100%; }

/* Badge */
.user-login-badge { display:inline-block; padding:0.75rem 2rem; background:linear-gradient(135deg,#FF6B9D,#C44569); color:var(--white); font-weight:600; border-radius:9999px; }

/* Branding right */
.branding-section { flex:1; padding:3rem; display:flex; align-items:center; justify-content:center; flex-direction:column;
   background: linear-gradient(135deg, rgba(0,82,204,.95), rgba(0,102,255,.95) 50%, rgba(6,214,160,.95)); color:white; text-align:center; }
.logo { width:100px; height:100px; background:white; border-radius:1rem; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; box-shadow:0 10px 25px rgba(0,0,0,.2); }
.brand-title { font-size:1.875rem; font-weight:700; margin-bottom:0.5rem; }
.brand-subtitle { font-weight:300; }

/* Alerts */
.alert { padding:1rem; border-radius:1rem; margin-bottom:1.5rem; display:flex; gap:.75rem; align-items:flex-start; }
.alert-success { background: rgba(6,214,160,.08); color:#047857; border-left:4px solid var(--success); }
.alert-danger { background: rgba(220,53,69,.08); color:#991b1b; border-left:4px solid var(--danger); }
.alert-warning { background: rgba(255,183,3,.08); color:#92400e; border-left:4px solid var(--warning); }

/* Form */
.form-group { margin-bottom:1.5rem; }
.input-group { position:relative; }
.form-control {
  width:100%; padding:0.9rem 1.25rem; font-size:1rem; border-radius:9999px;
  border:none; background:var(--bg-base); outline:none; box-shadow: inset -4px -4px 8px rgba(255,255,255,.5), inset 4px 4px 8px rgba(0,82,204,.12);
}
.input-icon { position:absolute; right:1.25rem; top:50%; transform:translateY(-50%); color:#9AA6B2; }
.password-toggle { position:absolute; right:3.5rem; top:50%; transform:translateY(-50%); cursor:pointer; color:#9AA6B2; }

/* Errors */
.error-message { display:none; color:var(--danger); font-size:.85rem; margin-top:.5rem; padding-left:1rem; }
.error-message.show { display:block; }

/* Buttons */
.btn { width:100%; padding:0.9rem 1rem; border-radius:9999px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:.5rem; text-transform:uppercase; letter-spacing:.04em; }
.btn-primary { background: linear-gradient(135deg,var(--secondary-color), #00D4FF); color:white; box-shadow: -6px -6px 12px rgba(255,255,255,.9), 6px 6px 12px rgba(0,82,204,.25); }
.btn-secondary { background: var(--bg-base); color:#495057; box-shadow: -6px -6px 12px rgba(255,255,255,.9), 6px 6px 12px rgba(0,82,204,.25); }
.btn-spinner { width:20px; height:20px; border:3px solid rgba(255,255,255,.3); border-top-color:white; border-radius:50%; display:none; animation:spin .8s linear infinite; }
.btn.loading .btn-spinner { display:block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* divider */
.divider { display:flex; align-items:center; gap:.5rem; margin:1.25rem 0; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:#CED4DA; }

/* responsive */
@media(max-width:900px){ .login-container{flex-direction:column-reverse; max-width:520px;} .branding-section{min-height:220px;} .form-container{padding:0;} }
@media(max-width:480px){ .login-container{border-radius:1.25rem;} .branding-section{padding:1rem;} .logo{width:60px;height:60px;} }