/* sign_in.css */
:root {
    --appl-red: #9b1f17;
  }
  
  html, body { height: 100%; }
  
  body {
    background-color: #f8f9fa;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
  }
  
  header { font-family: Arial, Helvetica, sans-serif; }
  
  /* General card form look */
  .card {
    border: 0;
    border-radius: 12px;
  }
  
  .btn.btn-dark {
    background-color: #000;
    border-color: #000;
  }
  
  /* Welcome span (inserted by JS) */
  #welcomeMsg {
    font-size: 1rem;
  }
  
  /* Optional adjustments for nav links */
  .navbar .nav-link {
    font-weight: 600;
  }
  
  /* Keep large headings readable and consistent */
  h1 { font-size: 2rem; font-weight: 700; }
  .lead { font-size: 1.125rem; }

  /* --- Auth box layout (welcome above logout) --- */
#authBox {
  display: none;                 /* shown only when logged in */
  flex-direction: column;
  align-items: center;           /* center text + button */
  justify-content: center;
  gap: 8px;                      /* little vertical space between welcome and button */
  margin-left: 12px;             /* small spacing from nav links */
}
/* ==== Auth area: welcome above logout, no overlap ==== */

/* Ensure the nav’s right-side container is a flex row that hugs the right edge */
.button-container {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-left: auto !important;   /* push to the right */
}

/* Stack welcome over the button */
#authBox {
  display: none;                  /* site.js flips to flex when logged in */
  flex-direction: column !important;
  align-items: center !important; /* center welcome over the button */
  justify-content: center !important;
  gap: 8px !important;
  min-width: 120px;               /* prevents crunching on small widths */
}

/* Make welcome text a block so nothing sits beside it */
#welcomeMsg {
  display: block !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-align: center !important;
}

/* Absolutely stop any prior positioning on the button */
#logoutNavBtn {
  position: static !important;
  display: inline-block !important;
  margin: 0 !important;
  margin-top: 4px !important;     /* slight nudge down under the welcome */
  align-self: center !important;  /* center under welcome */
}

/* Right-side auth area: welcome text inline next to Logout */
.button-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;          /* push to the right */
}

#welcomeMsg {
  color: #fff;
  font-weight: 700;
  line-height: 1;
  margin-right: 2px;          /* tiny breathing room before button */
}

/* Make sure the button isn't positioned weirdly */
#logoutNavBtn { position: static; }