/* login.css */

/* === GLOBAL RESET === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}


.messages-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

.message {
  position: relative;                 /* so .message-close is positioned relative to this box */
  padding: 10px 48px 10px 16px;       /* top/right/bottom/left: leave ~48px on the right for the button */
  border-radius: 4px;                /* pill shape; adjust as needed */
  font-size: 0.95rem;
  margin-bottom: 1rem;
  word-break: break-word;

  /* Example background & border for an “error” style */
  background-color: #f8d7da;          
  color: #842029;
  border: 1px solid #f5c2c7;
}


/* ─── CLOSE BUTTON ─── */
.message-close {
  position: absolute;
  top: 50%;                           /* vertically center relative to .message */
  right: 16px;                        /* distance from the right edge of .message */
  transform: translateY(-50%);        /* adjust for top:50% so it’s perfectly centered */
  
  border: none;
  background: none;
  color: inherit;                     /* match the message’s text color */
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;                         /* no extra padding—the container’s right‐padding makes space */
}

.message-close:hover {
  opacity: 0.7;
}

/* These classes correspond to Django’s message tags:
   e.g. msg.tags might be "error", "success", "info", etc. */
.message.error {
  background-color: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
}

.message.success {
  background-color: #d1e7dd;
  color: #0f5132;
  border: 1px solid #badbcc;
}

.message.warning {
  background-color: #fff3cd;
  color: #664d03;
  border: 1px solid #ffecb5;
}

.message.info {
  background-color: #cff4fc;
  color: #055160;
  border: 1px solid #b6effb;
}

/* === ROOT COLORS & FONTS === */
:root {
  /* Dark‐navy background for left panel */
  --dark-navy: #0f1624;
  /* Almost‐black background for right panel */
  --rich-black: #0a0a0a;
  /* Accent (Google’s “G” blue) */
  --google-blue: #4285f4;
  /* White text */
  --white: #FFFFFF;
  /* Light gray for sub‐text */
  --gray-light: #DDDDDD;
  /* Font stack */
  --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* === LAYOUT === */
body,
html {
  height: 100%;
  font-family: var(--font-sans);
}

.login-container {
  display: flex;
  width: 100%;
  height: 100vh; /* Fill full viewport height */
  overflow: hidden;
}

/* LEFT PANEL */
.login-left {
  position: relative;
  flex: 1.2; /* approx 60% of width */
  background-color: var(--dark-navy);
  overflow: hidden; /* hide any overflow from absolutely positioned images */
}

/* Container for all floating images */
.graphic-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Generic rules for all images within the left panel */
.graphic-wrapper img {
  position: absolute;
  user-select: none;
  pointer-events: none;
}

/* === POSITIONING FOR EACH ELEMENT ===
   (Adjust top/left/right/bottom values to match your desired layout.
    These are approximate and may need tweaking based on your actual image dimensions.)
*/

/* PLATFORM 1 */
.platform.platform-1 {
  bottom: 5%;
  left: 10%;
  width: 200px; /* adjust as needed */
}

/* PERSON 1 sitting on platform-1 */
.person.person-1 {
  bottom: 10%;    /* shift up so person sits on platform */
  left: 12%;
  width: 120px;   /* adjust to match PNG dimensions */
}

/* PLATFORM 2 */
.platform.platform-2 {
  top: 30%;
  right: 12%;
  width: 180px;
}

/* PERSON 2 standing at platform-2 */
.person.person-2 {
  top: 25%;
  right: 10%;
  width: 100px;
}

/* PLATFORM 3 */
.platform.platform-3 {
  bottom: 18%;
  right: 25%;
  width: 160px;
}

/* PERSON 3 working at desk on platform-3 */
.person.person-3 {
  bottom: 22%;
  right: 23%;
  width: 100px;
}

/* CUBE SHAPE */
.shape.shape-cube {
  top: 10%;
  left: 30%;
  width: 60px;
}

/* CYLINDER SHAPE */
.shape.shape-cylinder {
  top: 20%;
  left: 50%;
  width: 40px;
}

/* TRIANGLE SHAPE */
.shape.shape-triangle {
  bottom: 35%;
  left: 40%;
  width: 50px;
}

/* Add more shapes/platform/person CSS rules here as needed, giving each a unique class. */

/* RIGHT PANEL */
.login-right {
  flex: 0.8; /* approx 40% of width */
  background-color:  var(--turing-foreground);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* The white box in the center of the right panel */
.login-box {
  text-align: center;
  max-width: 320px;
  padding: 40px 20px;
  color: var(--white);
}

/* Heading */
.login-box h1 {
  font-size: 1.8rem;
  margin-bottom: 16px;
}

/* Subtext */
.login-box p {
  font-size: 1rem;
  color: var(--gray-light);
  margin-bottom: 32px;
}

/* GOOGLE BUTTON */
.google-btn {
  display: inline-flex;
  align-items: center;
  background-color: var(--google-blue);
  color: var(--white);
  border: none;
  border-radius: 4px;
  padding: 12px 20px;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

/* Google logo within the button */
.google-logo {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  background-color: var(--white);
  border-radius: 2px;
  padding: 2px;
}

/* Hover/focus effect */
.google-btn:hover,
.google-btn:focus {
  background-color: #357ae8; /* slightly darker blue */
}

/* Ensure the link does not show underline */
.google-btn span {
  vertical-align: middle;
}

/* If you need to center the login box responsively */
@media (max-width: 768px) {
  .login-container {
    flex-direction: column;
  }
  .login-left,
  .login-right {
    flex: none;
    width: 100%;
    height: 50vh; /* each takes half height on narrow screens */
  }
  .login-right {
    height: auto;
    padding: 40px 0;
  }
}

/* === TOGGLE BUTTON & MANUAL FORM === */

/* Style for the “Or log in manually” button */
.toggle-manual-btn {
  margin-top: 20px;
  background-color: transparent;
  border: 2px solid var(--white);
  color: var(--white);
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.toggle-manual-btn:hover,
.toggle-manual-btn:focus {
  background-color: var(--white);
  color:  var(--turing-foreground);
}

/* Hidden by default */
.manual-login-form {
  display: block;
  margin-top: 20px;
  text-align: left; /* left-align labels/inputs */
}

/* Space between form groups */
.manual-login-form .form-group {
  margin-bottom: 16px;
}

/* Label styling */
.manual-login-form label {
  display: block;
  font-size: 0.9rem;
  color: var(--white);
  margin-bottom: 4px;
}


/* Submit button for manual login */
.manual-login-form .submit-btn {
  width: 100%;
  padding: 12px;
  background-color: var(--google-blue);
  border: none;
  border-radius: 4px;
  color: var(--white);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.manual-login-form .submit-btn:hover,
.manual-login-form .submit-btn:focus {
  background-color: #357ae8;
}


/* ===== GENERIC FORM STYLING FOR .login-box (applies to register, too) ===== */

.login-box .form-group {
  margin-bottom: 16px;  /* space between each label+input pair */
}

.login-box label {
  display: block;
  font-size: 0.9rem;
  color: var(--white);
  margin-bottom: 4px;
}

.login-box .submit-btn {
  width: 100%;
  padding: 12px;
  background-color: var(--google-blue);
  border: none;
  border-radius: 4px;
  color: var(--white);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.login-box .submit-btn:hover,
.login-box .submit-btn:focus {
  background-color: #357ae8; /* slightly darker blue */
}

.form-error-message {
    color: #ff6666 !important;
    margin-top: 1rem !important;
}

input {
  width: 100%;
  padding: 0.6em 0.8em;
  border: 1px solid #555555;
  border-radius: 4px;
  background-color: #222222;
  color: #ffffff;
  font-size: 1rem;
  box-sizing: border-box;
  transition: all 0.5s linear;
}
input:focus {
  outline: none;
  border-color: #77aaff;
  box-shadow: 0 0 0 2px rgba(119, 170, 255, 0.3);
}
input:hover {
  cursor: pointer;
  border: 1px solid #929292;
}