/* ============================================================
   BeeECM Ticket Support System - Custom Login Page
   Targets: Zammad 6.x Legacy App (CoffeeScript / Backbone)

   Structure:
     .login.fullscreen
       .fullscreen-center
         .fullscreen-body
           p                     ← "Log in to ..." title
           .hero-unit            ← white card
             .company-logo       ← logo img
             form#login          ← login form
               .form-control     ← inputs
               .btn.btn--primary ← sign in button
           .js-footer            ← info text
       .poweredBy                ← "Powered by Zammad"
   ============================================================ */

/* ===========================================
   1. FULL PAGE BACKGROUND
   =========================================== */
.login.fullscreen,
.signup.fullscreen,
.reset_password.fullscreen {
  background: linear-gradient(160deg, #0b1120 0%, #0f2547 30%, #0a4d8c 65%, #0284c7 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Radial glow effects */
.login.fullscreen::before,
.signup.fullscreen::before,
.reset_password.fullscreen::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.login.fullscreen::after,
.signup.fullscreen::after,
.reset_password.fullscreen::after {
  content: '';
  position: absolute;
  bottom: -15%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.fullscreen-center {
  position: relative;
  z-index: 1;
}

/* ===========================================
   2. PAGE TITLE  (replaced by JS)
   =========================================== */
.fullscreen-body > p:first-child {
  display: none !important;
}

/* Custom title injected by JS */
#beeecm-title {
  text-align: center;
  margin-bottom: 0.25rem;
  padding: 0 1rem;
}

#beeecm-title .title-main {
  display: block;
  font-size: 2.1rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

#beeecm-title .title-sub {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  color: rgba(148, 213, 255, 0.9);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 0.4rem;
}

#beeecm-title .title-line {
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  margin: 0.75rem auto 0;
  border-radius: 2px;
}

/* ===========================================
   3. LOGIN CARD BOX (.hero-unit)
   =========================================== */
.login .hero-unit,
.signup .hero-unit,
.reset_password .hero-unit {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(20px) !important;
  border-radius: 20px !important;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  padding: 2.5rem 2.5rem 2rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  margin: 1.5rem auto !important;
  max-width: 420px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.login .hero-unit:hover,
.signup .hero-unit:hover,
.reset_password .hero-unit:hover {
  transform: translateY(-2px);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* ===========================================
   4. COMPANY LOGO
   =========================================== */
.login .company-logo {
  max-height: 72px !important;
  margin-bottom: 1.5rem !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08)) !important;
}

/* ===========================================
   5. FORM LABELS
   =========================================== */
.login .formGroup-label label,
.signup .formGroup-label label,
.reset_password .formGroup-label label {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ===========================================
   6. INPUT FIELDS
   =========================================== */
.login .form-control,
.signup .form-control,
.reset_password .form-control {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 1rem 1.15rem !important;
  font-size: 1.2rem !important;
  background: #f8fafc !important;
  color: #1e293b !important;
  transition: all 0.25s ease !important;
  box-shadow: none !important;
  height: auto !important;
}

.login .form-control:focus,
.signup .form-control:focus,
.reset_password .form-control:focus {
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12) !important;
  background: #ffffff !important;
  outline: none !important;
}

.login .form-control::placeholder,
.signup .form-control::placeholder,
.reset_password .form-control::placeholder {
  color: #94a3b8 !important;
}

/* ===========================================
   7. REMEMBER ME CHECKBOX
   =========================================== */
.login .checkbox-replacement .label-text {
  color: #64748b !important;
  font-size: 1.1rem !important;
}

/* ===========================================
   8. SIGN IN BUTTON
   =========================================== */
.login .btn.btn--primary,
.signup .btn.btn--primary,
.reset_password .btn.btn--primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 1rem 2rem !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  letter-spacing: 0.03em !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  width: 100% !important;
  margin-top: 0.5rem !important;
}

.login .btn.btn--primary:hover,
.signup .btn.btn--primary:hover,
.reset_password .btn.btn--primary:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 50%, #0284c7 100%) !important;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.45), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px) !important;
}

.login .btn.btn--primary:active,
.signup .btn.btn--primary:active,
.reset_password .btn.btn--primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3) !important;
}

/* ===========================================
   9. FORGOT PASSWORD LINK
   =========================================== */
.login .btn.btn--text.btn--secondary,
.signup .btn.btn--text.btn--secondary,
.reset_password .btn.btn--text.btn--secondary,
.login .btn.btn--text.btn--subtle,
.signup .btn.btn--text.btn--subtle,
.reset_password .btn.btn--text.btn--subtle {
  color: #64748b !important;
  font-size: 1.1rem !important;
  margin-top: 0.5rem !important;
  transition: color 0.2s ease !important;
}

.login .btn.btn--text.btn--secondary:hover,
.signup .btn.btn--text.btn--secondary:hover,
.reset_password .btn.btn--text.btn--secondary:hover,
.login .btn.btn--text.btn--subtle:hover,
.signup .btn.btn--text.btn--subtle:hover,
.reset_password .btn.btn--text.btn--subtle:hover {
  color: #0ea5e9 !important;
}

/* ===========================================
   10. SEPARATOR ("or sign in using")
   =========================================== */
.login .separator {
  border-color: #e2e8f0 !important;
}

.login .separator-text {
  color: #94a3b8 !important;
  background: #ffffff !important;
}

/* ===========================================
   11. FOOTER TEXT (.js-footer)
   =========================================== */
.login .js-footer {
  display: none !important;
}


/* ===========================================
   12. POWERED BY FOOTER
   =========================================== */
.login .poweredBy,
.signup .poweredBy,
.reset_password .poweredBy {
  display: none !important;
}

/* ===========================================
   13. OPERATION TIME FOOTER (injected by JS)
   =========================================== */
#beeecm-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0.75rem 1.5rem;
  background: rgba(7, 15, 30, 0.92);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(14, 165, 233, 0.15);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

#beeecm-footer .footer-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  font-weight: 500;
}

#beeecm-footer .footer-icon {
  font-size: 1.1rem;
}

#beeecm-footer .footer-divider {
  width: 1px;
  height: 16px;
  background: rgba(14, 165, 233, 0.25);
}

#beeecm-footer .footer-highlight {
  color: #38bdf8;
  font-weight: 600;
}

/* Add padding at bottom so content doesn't hide behind footer */
.login.fullscreen,
.signup.fullscreen,
.reset_password.fullscreen {
  padding-bottom: 50px !important;
}


/* ===========================================
   14. FORM CONTROLS LAYOUT
   =========================================== */
.login .form-controls,
.signup .form-controls,
.reset_password .form-controls {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.25rem !important;
  margin-top: 0.75rem !important;
}

/* Headings inside signup/reset_password cards */
.signup .hero-unit h1,
.signup .hero-unit h2,
.reset_password .hero-unit h2 {
  color: #1e293b !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}

/* ===========================================
   15. SPLASH SCREEN (Loading)
   =========================================== */
.splash {
  background: linear-gradient(160deg, #0b1120 0%, #0f2547 30%, #0a4d8c 65%, #0284c7 100%) !important;
}

.splash .splash-title {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ===========================================
   16. RESPONSIVE
   =========================================== */
@media (max-width: 640px) {
  .login .hero-unit {
    margin: 1rem 0.75rem !important;
    padding: 1.75rem 1.5rem 1.25rem !important;
    border-radius: 16px !important;
  }

  #beeecm-title .title-main {
    font-size: 1.5rem;
  }

  #beeecm-footer {
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 1rem;
  }

  #beeecm-footer .footer-divider {
    display: none;
  }
}

/* ============================================================
   INTERNAL APP THEME
   All internal app styling is now handled by JavaScript
   (injected via custom.js as <style id="beeecm-theme">)
   to avoid browser caching issues with this CSS file.
   ============================================================ */