/* RSBSA SOCCSKSARGEN PAFFP — Authentication pages
   Modern split-layout: brand panel on the left, form panel on the right.
   DA institutional GREEN + GOLD, distinct from the Davao build:
   a brighter emerald primary with a rich antique-gold accent.
*/

:root {
  --auth-green-900: #082818;   /* deepest emerald */
  --auth-green-800: #103d28;
  --auth-green-700: #15663d;   /* primary emerald */
  --auth-green-600: #1f8a54;
  --auth-gold:      #f2c14e;   /* gold accent (light) */
  --auth-gold-dark: #c8901a;   /* gold accent (dark) */
  --auth-bg:        #f4f8f5;
  --auth-card-bg:   #ffffff;
  --auth-text:      #1d2a23;
  --auth-muted:     #677a6e;
  --auth-border:    #dde6e0;
  --auth-input-bg:  #f5faf6;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.auth-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--auth-bg);
  color: var(--auth-text);
  -webkit-font-smoothing: antialiased;
}

/* ── Shell ─────────────────────────────────────────────────────────── */
.auth-shell {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
}

/* ── Brand Panel ───────────────────────────────────────────────────── */
.auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 3rem 3.5rem;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.auth-brand-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 20% 10%, rgba(242,193,78,0.18), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(31,138,84,0.6), transparent 50%),
    linear-gradient(135deg, var(--auth-green-900) 0%, var(--auth-green-700) 60%, var(--auth-green-600) 100%);
}
.auth-brand-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.auth-brand-top { display: flex; align-items: center; gap: 1.1rem; }
.auth-brand-logos { display: flex; align-items: center; gap: .6rem; position: relative; }
.auth-brand-logos img {
  width: 68px; height: 68px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 8px;
  border: 2px solid rgba(242,193,78,0.45);
  box-shadow:
    0 10px 24px -8px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.7);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.auth-brand-logos img:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(242,193,78,0.85);
  box-shadow:
    0 14px 28px -8px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(255,255,255,0.8);
}

.auth-brand-org { line-height: 1.4; }
.auth-brand-org strong {
  display: block;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: .4px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.auth-brand-org span {
  display: block;
  font-size: .87rem;
  opacity: .9;
  margin-top: 2px;
}
.auth-brand-org em {
  display: inline-flex;
  align-items: center;
  margin-top: .55rem;
  font-style: normal;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--auth-gold);
  padding: .3rem .85rem;
  background: rgba(242,193,78,0.13);
  border: 1px solid rgba(242,193,78,0.32);
  border-radius: 100px;
}
/* (dot removed — em pill stands alone) */

.auth-brand-body { margin-top: auto; margin-bottom: auto; padding: 3rem 0; }
.auth-brand-eyebrow {
  display: inline-block; padding: .35rem .9rem;
  background: rgba(242,193,78,0.18);
  color: var(--auth-gold);
  border: 1px solid rgba(242,193,78,0.4);
  border-radius: 100px;
  font-size: .68rem; font-weight: 700; letter-spacing: 1.6px;
  margin-bottom: 1.25rem;
}
.auth-brand-title {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 1rem;
  max-width: 28ch;
}
.auth-brand-lede {
  font-size: 1rem;
  line-height: 1.6;
  opacity: .85;
  max-width: 44ch;
  margin-bottom: 2rem;
}

.auth-feature-list { list-style: none; padding: 0; margin: 0; }
.auth-feature-list li {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem 0;
  font-size: .92rem;
  opacity: .92;
}
.auth-feature-list i {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(242,193,78,0.15);
  color: var(--auth-gold);
  border-radius: 8px;
  font-size: 1rem;
  flex-shrink: 0;
}

.auth-brand-footer { margin-top: 1rem; opacity: .55; font-size: .78rem; }

/* ── Form Panel ───────────────────────────────────────────────────── */
.auth-main {
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 1.5rem;
  background: var(--auth-bg);
}
.auth-main-inner { width: 100%; max-width: 460px; }

/* ── Brand Banner (above the auth card, all viewports) ────────────── */
.auth-banner {
  display: flex !important;
  align-items: center; gap: 1rem;
  padding: .9rem 1.1rem;
  margin-bottom: 1.25rem;
  background: #ffffff;
  border: 1px solid var(--auth-border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--auth-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -16px rgba(21,102,61,0.25);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  position: relative;
  overflow: visible;
}
.auth-banner:hover {
  border-color: var(--auth-green-600);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 14px 32px -16px rgba(21,102,61,0.35);
  color: var(--auth-text); text-decoration: none;
}
.auth-banner::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--auth-green-700) 0%, var(--auth-gold-dark) 100%);
}
.auth-banner-logos { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.auth-banner-logo {
  width: 54px; height: 54px;
  object-fit: contain;
  flex-shrink: 0;
}
.auth-banner-text {
  display: flex; flex-direction: column;
  line-height: 1.3;
  flex: 1; min-width: 0;
}
.auth-banner-title {
  display: block;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .25px;
  color: var(--auth-green-800);
  text-transform: uppercase;
  white-space: nowrap !important;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-banner-sub {
  font-size: .82rem;
  color: var(--auth-muted);
  margin-top: 1px;
}
.auth-banner-tag {
  display: inline-block;
  margin-top: .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--auth-green-700);
  position: relative;
}
.auth-banner-tag::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--auth-gold);
  margin-right: .5rem;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(242,193,78,0.2);
}

.auth-card {
  background: var(--auth-card-bg);
  border-radius: 16px;
  padding: 2.25rem 2rem;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 20px 50px -20px rgba(21,102,61,0.15),
    0 0 0 1px var(--auth-border);
}

.auth-card-head { margin-bottom: 1.5rem; }
.auth-card-head h2 {
  font-size: 1.55rem; font-weight: 700;
  color: var(--auth-green-800); margin: 0 0 .35rem;
}
.auth-card-head p { font-size: .9rem; color: var(--auth-muted); margin: 0; }

/* ── Form fields ───────────────────────────────────────────────────── */
.auth-card .form-label {
  font-size: .82rem; font-weight: 600;
  color: var(--auth-text); margin-bottom: .35rem;
}
.auth-card .form-control,
.auth-card .form-select {
  background: var(--auth-input-bg);
  border: 1.5px solid var(--auth-border);
  border-radius: 10px;
  padding: .65rem .85rem;
  font-size: .95rem;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.auth-card .form-control:focus,
.auth-card .form-select:focus {
  background: #fff;
  border-color: var(--auth-green-600);
  box-shadow: 0 0 0 4px rgba(21,102,61,0.08);
}

.auth-input-group { position: relative; }
.auth-input-group .form-control { padding-left: 2.6rem; }
.auth-input-group .auth-input-icon {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2.6rem; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--auth-muted);
  pointer-events: none;
}

.auth-card .btn-primary {
  background: linear-gradient(135deg, var(--auth-green-700) 0%, var(--auth-green-600) 100%);
  border: none;
  padding: .8rem 1rem;
  font-size: .98rem;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 6px 16px -4px rgba(21,102,61,0.4);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
.auth-card .btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 20px -6px rgba(21,102,61,0.5);
}
.auth-card .btn-primary:active { transform: translateY(1px); }

.auth-divider {
  display: flex; align-items: center; gap: .8rem;
  margin: 1.5rem 0; color: var(--auth-muted); font-size: .78rem; font-weight: 500;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--auth-border);
}

.auth-links {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .88rem;
}
.auth-links a { color: var(--auth-green-700); font-weight: 500; text-decoration: none; }
.auth-links a:hover { color: var(--auth-green-800); text-decoration: underline; }

/* ── Inline alerts ─────────────────────────────────────────────────── */
.auth-alert {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .7rem .9rem;
  border-radius: 10px;
  font-size: .88rem;
  margin-bottom: 1.1rem;
  line-height: 1.4;
}
.auth-alert i { font-size: 1.05rem; margin-top: 1px; }
.auth-alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.auth-alert-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.auth-alert-info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

.auth-password-toggle {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--auth-muted); cursor: pointer;
}
.auth-password-toggle:hover { color: var(--auth-green-700); background: rgba(21,102,61,0.06); }

.auth-page-footer {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--auth-muted);
  font-size: .76rem;
  line-height: 1.5;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-card { padding: 1.75rem 1.4rem; }
}
@media (max-width: 480px) {
  .auth-main { padding: 1.25rem .9rem; }
  .auth-card { padding: 1.5rem 1.15rem; }
  .auth-card-head h2 { font-size: 1.35rem; }
  .auth-banner { padding: .75rem .9rem; gap: .75rem; }
  .auth-banner-logo { width: 50px; height: 50px; }
  .auth-banner-title { font-size: .74rem; letter-spacing: .15px; }
  .auth-banner-sub { font-size: .74rem; }
  .auth-banner-tag { font-size: .7rem; letter-spacing: .9px; margin-top: .25rem; }
  .auth-banner-tag::before { width: 6px; height: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════
   LOGIN UI POLISH — refined split layout (additive, purely visual)
   Animated aurora brand panel, floating gold orb, staggered entrances,
   gold-underlined hero, smarter focus & micro-interactions.
   ═══════════════════════════════════════════════════════════════════ */

/* Living aurora gradient on the brand panel */
.auth-brand-bg {
  background:
    radial-gradient(circle at 18% 12%, rgba(242,193,78,0.22), transparent 42%),
    radial-gradient(circle at 82% 88%, rgba(31,138,84,0.65), transparent 52%),
    radial-gradient(circle at 60% 30%, rgba(242,193,78,0.10), transparent 38%),
    linear-gradient(135deg, var(--auth-green-900) 0%, var(--auth-green-700) 55%, var(--auth-green-600) 100%);
  background-size: 170% 170%, 170% 170%, 170% 170%, 100% 100%;
  animation: authAurora 22s ease-in-out infinite alternate;
}
@keyframes authAurora {
  0%   { background-position:  0%   0%, 100% 100%, 50%  0%, 0 0; }
  100% { background-position: 28%  22%,  72%  78%, 64% 34%, 0 0; }
}

/* Floating gold glow orb behind the brand content */
.auth-brand::before {
  content: ""; position: absolute; z-index: -1;
  width: 460px; height: 460px; top: -140px; right: -150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,193,78,0.18) 0%, transparent 70%);
  animation: authFloat 14s ease-in-out infinite alternate;
}
@keyframes authFloat {
  from { transform: translate(0, 0)      scale(1);    }
  to   { transform: translate(-34px, 46px) scale(1.08); }
}

/* Bolder hero with a gold underline accent */
.auth-brand-title {
  font-size: clamp(1.8rem, 2.7vw, 2.55rem);
  letter-spacing: -.4px;
}
.auth-brand-title::after {
  content: ""; display: block;
  width: 64px; height: 4px; margin-top: 1.1rem;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--auth-gold) 0%, rgba(242,193,78,0) 100%);
}

/* Staggered entrance for brand content */
.auth-brand-eyebrow { animation: authFade .6s .05s both; }
.auth-brand-title   { animation: authFade .6s .15s both; }
.auth-brand-lede    { animation: authFade .6s .25s both; }
.auth-feature-list li { animation: authFade .6s both; }
.auth-feature-list li:nth-child(1) { animation-delay: .32s; }
.auth-feature-list li:nth-child(2) { animation-delay: .40s; }
.auth-feature-list li:nth-child(3) { animation-delay: .48s; }
.auth-feature-list li:nth-child(4) { animation-delay: .56s; }
@keyframes authFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Card + banner rise-in on the form side */
.auth-banner { animation: authRise .55s .04s cubic-bezier(.2,.7,.2,1) both; }
.auth-card   { animation: authRise .55s .12s cubic-bezier(.2,.7,.2,1) both; }
@keyframes authRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Feature rows respond to hover */
.auth-feature-list li { transition: transform .18s ease, opacity .18s ease; }
.auth-feature-list li:hover { opacity: 1; transform: translateX(4px); }
.auth-feature-list i { transition: transform .18s ease, background-color .18s ease; }
.auth-feature-list li:hover i { transform: scale(1.1); background: rgba(242,193,78,0.26); }

/* Input icon lights up green on focus */
.auth-input-group:focus-within .auth-input-icon { color: var(--auth-green-700); }
.auth-input-group:focus-within .form-control { box-shadow: 0 0 0 4px rgba(21,102,61,0.12); }

/* Sign-in button: nudge the arrow on hover */
.auth-card .btn-primary i { transition: transform .18s ease; }
.auth-card .btn-primary:hover i { transform: translateX(4px); }

/* Refined "OR" divider with a soft gold center dot */
.auth-divider { text-transform: uppercase; letter-spacing: 1.5px; }
.auth-divider::before, .auth-divider::after {
  background: linear-gradient(90deg, transparent, var(--auth-border));
}
.auth-divider::after { background: linear-gradient(90deg, var(--auth-border), transparent); }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .auth-brand-bg, .auth-brand::before,
  .auth-brand-eyebrow, .auth-brand-title, .auth-brand-lede,
  .auth-feature-list li, .auth-banner, .auth-card { animation: none !important; }
}