/* ==========================================================================
   Cable Manager - Authentication screens
   Shared by login.php, admin-login.php and subscriber-login.php.
   ========================================================================== */

body.auth-page {
  flex-direction: column;
  display: flex;
  align-items: center;
  /* The picture carries the company mark at the top and leaves the middle
     clear, so the card is set down from the top rather than centred.

     The picture is scaled to cover the window and pinned to the top edge,
     so however wide the screen, the mark is never cropped - what gives way
     is the decorative bottom edge. Covering means it is scaled by width on
     a wide screen and by height on a tall one; the mark's bottom sits at
     14.7% of the picture's width or 26% of its height, whichever is the
     one doing the scaling, and the card is set just under that. The
     gradient stays underneath as what shows if the picture is ever
     missing. */
  justify-content: flex-start;
  padding-top: max(calc(14.7vw + 14px), calc(26vh + 14px));
  min-height: 100vh;
  /* Two layers: the picture on top, the gradient beneath it. */
  background: url(../login-bg.jpg) center top / cover no-repeat fixed, var(--gradient-green);
  font-family: var(--font-family);
}

.login-container {
  width: 100%;
  max-width: 400px;
  padding: 20px;
}

/* Lighter and smaller than it was, so it sits on the picture rather than
   over it: a little of the artwork shows through, and the card takes up no
   more of the clear middle than the form needs. */
.login-box {
  /* The theme's own glass: white in the light, near-black in the dark, so the
     card follows the words and fields inside it rather than staying white
     while they turn pale. */
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--neutral-medium);
  border-radius: var(--radius-lg);
  padding: 26px 32px 28px;
  box-shadow: 0 16px 48px rgba(16, 38, 26, 0.18);
}

.login-header {
  text-align: center;
  margin-bottom: 18px;
}

/* Holds the full brand lockup (mark + company name).
   auth.css is the last stylesheet these pages load, so the sizing lives here
   and nowhere else - defining it upstream only gets overridden. */
.login-logo {
  width: 148px;
  height: 148px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.login-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
}

.login-box .form-group {
  margin-bottom: 20px;
}

.login-box label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-primary);
  font-size: 14px;
}

.login-box input {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border: 1px solid var(--neutral-gray);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  transition: var(--transition);
}

.login-box input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(45, 95, 63, 0.15);
}

.login-box input::placeholder {
  color: var(--text-secondary);
}

.password-wrapper {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 16px;
  user-select: none;
  opacity: 0.6;
}

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  font-size: 13px;
}

.signup-link {
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}

.signup-link a {
  color: var(--primary);
  font-weight: 600;
}

/* This was a blue notice sitting on a green screen, borrowed from a stock
   alert set. Made a quiet neutral instead: it is a note, not a status, and
   it should not compete with the error box directly below it for attention. */
.alert-info {
  background-color: #F4F2ED;
  border: 1px solid #DFDBD2;
  padding: 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: #514B43;
  margin-bottom: 20px;
  line-height: 1.4;
}

[data-theme="dark"] .alert-info {
  background-color: var(--surface-soft);
  border-color: var(--neutral-medium);
  color: var(--text-secondary);
}

/* Validation feedback rendered by the server after a failed sign-in. */
.auth-error {
  background-color: #FBEDEE;
  border: 1px solid rgba(193, 59, 71, 0.30);
  color: #8E2A34;
  padding: 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  margin-bottom: 20px;
  line-height: 1.4;
}

[data-theme="dark"] .auth-error {
  background-color: rgba(193, 59, 71, 0.18);
  border-color: rgba(193, 59, 71, 0.45);
  color: #F3B4BA;
}

.login-form {
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* On a wide screen the picture already shows the mark above the card, so the
   card does not repeat it. On a phone the picture is cropped to its middle
   and the mark is lost, so the card's own comes back and the card is centred
   as before. */
.login-logo { display: none; }

@media (max-width: 768px) {
  body.auth-page { justify-content: center; padding-top: 0; }
  .login-logo  { display: flex; }
  /* Solid here: the picture is cropped to its middle on a phone, and its
     mark would otherwise ghost through the card behind the card's own. */
  .login-box   { padding: 30px 20px; background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .login-title { font-size: 24px; }
}

.forgot-password {
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition);
}

.forgot-password:hover {
  text-decoration: underline;
}