/* ====================================================================== *
 * File: login_pro.css
 * Location: static/css/login_pro.css
 * Description: Minimal navy-and-gold login presentation for Fereshte Academy.
 * Version: 2.0.0
 * Last Modified: Fri Aug 07 2026 - 23:06
 * Dependencies: app.css design tokens and Estedad font
 * ====================================================================== */

/* -------------------------------------------------------------------------- *
 * 1. Login shell
 * -------------------------------------------------------------------------- */

.login-page {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(370px, 0.98fr);
  max-width: 1040px;
  min-height: 590px;
  margin: 30px auto 42px;
  overflow: hidden;
  border: 1px solid rgba(207, 216, 230, 0.9);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 32px 90px rgba(8, 30, 63, 0.17);
}

/* -------------------------------------------------------------------------- *
 * 2. Decorative navy panel
 * -------------------------------------------------------------------------- */

.login-showcase {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 590px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 18%, rgba(93, 143, 235, 0.34), transparent 31%),
    radial-gradient(circle at 82% 74%, rgba(218, 174, 75, 0.24), transparent 29%),
    linear-gradient(145deg, #04152f 0%, #08254e 52%, #123f78 100%);
}

.login-showcase::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, #000 18%, transparent 74%);
}

.login-art-halo {
  position: absolute;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(226, 185, 91, 0.22);
  border-radius: 50%;
  box-shadow:
    0 0 0 42px rgba(255, 255, 255, 0.025),
    0 0 90px rgba(218, 174, 75, 0.09);
}

.login-artwork {
  position: relative;
  z-index: 2;
  width: min(88%, 500px);
  height: auto;
  filter: drop-shadow(0 22px 32px rgba(0, 0, 0, 0.2));
}

.login-monogram {
  position: absolute;
  right: 34px;
  bottom: 28px;
  z-index: 3;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid rgba(245, 222, 160, 0.55);
  border-radius: 15px;
  background: rgba(4, 21, 47, 0.6);
  color: #e5bd66;
  font-family: Georgia, serif;
  font-size: 1.2rem;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
}

/* -------------------------------------------------------------------------- *
 * 3. Form panel
 * -------------------------------------------------------------------------- */

.login-panel {
  display: flex;
  align-items: center;
  padding: 54px 50px;
  background:
    radial-gradient(circle at 100% 0, rgba(232, 197, 111, 0.11), transparent 31%),
    #fff;
}

.login-panel-inner {
  width: 100%;
  max-width: 370px;
  margin: auto;
}

.login-logo {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 42px;
}

.login-logo img {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(218, 174, 75, 0.42);
  border-radius: 17px;
  box-shadow: 0 12px 30px rgba(11, 43, 87, 0.16);
}

.login-logo strong {
  color: #11213a;
  font-size: 1.02rem;
  font-weight: 900;
}

.login-panel h1 {
  margin: 0 0 28px;
  color: #101d31;
  font-size: 1.85rem;
  line-height: 1.4;
}

.login-page .alert {
  margin-bottom: 18px;
}

.login-form {
  display: grid;
  gap: 18px;
}

/* - - - 3.1. Input controls - - - */

.login-field {
  display: grid;
  gap: 8px;
}

.login-field label {
  color: #344054;
  font-size: 0.84rem;
  font-weight: 800;
}

.login-input-wrap {
  position: relative;
}

.login-input-wrap svg {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 19px;
  height: 19px;
  transform: translateY(-50%);
  color: #8490a3;
  pointer-events: none;
}

.login-input-wrap input {
  width: 100%;
  box-sizing: border-box;
  min-height: 49px;
  padding: 13px 46px 13px 14px;
  border: 1px solid #ccd6e4;
  border-radius: 13px;
  background: #f9fbfd;
  color: #172033;
  font: inherit;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.login-input-wrap input:focus {
  outline: 0;
  border-color: #315fc5;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(49, 95, 197, 0.11);
}

/* - - - 3.2. Primary action - - - */

.login-submit {
  width: 100%;
  min-height: 50px;
  margin-top: 3px;
  border: 1px solid rgba(229, 189, 102, 0.4);
  border-radius: 13px;
  background:
    linear-gradient(110deg, rgba(232, 197, 111, 0.15), transparent 35%),
    linear-gradient(135deg, #08254e, #174a8d);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(11, 43, 87, 0.22);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.login-submit:hover {
  transform: translateY(-1px);
  border-color: rgba(229, 189, 102, 0.72);
  box-shadow: 0 18px 36px rgba(11, 43, 87, 0.28);
}

.login-submit:focus-visible,
.login-logo:focus-visible {
  outline: 3px solid rgba(49, 95, 197, 0.24);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------- *
 * 4. Responsive layout
 * -------------------------------------------------------------------------- */

@media (max-width: 850px) {
  .login-page {
    grid-template-columns: 1fr;
    max-width: 600px;
  }

  .login-showcase {
    min-height: 250px;
  }

  .login-artwork {
    width: min(72%, 360px);
    transform: translateY(9%);
  }

  .login-art-halo {
    width: 280px;
    height: 280px;
  }

  .login-panel {
    padding: 42px 36px 46px;
  }

  .login-logo {
    margin-bottom: 30px;
  }
}

@media (max-width: 560px) {
  .login-page {
    min-height: 0;
    margin: 10px auto 26px;
    border-radius: 22px;
  }

  .login-showcase {
    display: none;
  }

  .login-panel {
    min-height: 500px;
    padding: 36px 22px;
  }

  .login-panel h1 {
    margin-bottom: 24px;
    font-size: 1.55rem;
  }

  .login-logo {
    margin-bottom: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-submit {
    transition: none;
  }
}

/* ============================= End of login_pro.css ============================= */