/*
 * Siemens Login Theme for MantisBT
 * Version: 3.0.0
 * Description: Enhanced login page styling with Siemens branding
 * Author: Siemens Digital Industries Software Poland
 */

/* Główne tło strony logowania */
body.login-page,
body[class*="login"],
.login-container {
  background: linear-gradient(135deg, #0f1419 0%, #1a1d29 50%, #0f1419 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Kontener formularza logowania */
.login-box,
.form-container,
.widget-box {
  background-color: rgba(26, 29, 41, 0.95) !important;
  border: 1px solid #00d4aa !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 212, 170, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  padding: 30px !important;
  margin: 50px auto !important;
  max-width: 400px !important;
}

/* Nagłówek formularza logowania */
.widget-header,
.login-header,
h1.login-title {
  background: linear-gradient(90deg, #00d4aa, #1dd1a1) !important;
  color: #0f1419 !important;
  text-align: center !important;
  padding: 20px !important;
  margin: -30px -30px 30px -30px !important;
  border-radius: 8px 8px 0 0 !important;
  font-weight: bold !important;
  font-size: 18px !important;
  text-shadow: none !important;
}

/* Logo na stronie logowania - dodatkowe style */
.login-logo {
  text-align: center !important;
  margin: 30px 0 !important;
  padding: 20px !important;
}

.login-logo img {
  max-width: 180px !important;
  max-height: 50px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 10px rgba(0, 212, 170, 0.3)) !important;
}

/* Pola formularza */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
  background-color: rgba(15, 20, 25, 0.8) !important;
  border: 2px solid #2d3035 !important;
  border-radius: 6px !important;
  color: #e6e6e6 !important;
  padding: 12px 15px !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.3s ease !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
  border-color: #00d4aa !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.1) !important;
  outline: none !important;
}

/* Etykiety pól */
label,
.category label {
  color: #e6e6e6 !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Przyciski */
.btn,
.btn-primary,
input[type="submit"],
button {
  background: linear-gradient(135deg, #00d4aa 0%, #1dd1a1 100%) !important;
  border: none !important;
  border-radius: 6px !important;
  color: #0f1419 !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  margin-top: 10px !important;
}

.btn:hover,
.btn-primary:hover,
input[type="submit"]:hover,
button:hover {
  background: linear-gradient(135deg, #1dd1a1 0%, #00d4aa 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3) !important;
}

/* Linki */
a {
  color: #00d4aa !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

a:hover {
  color: #1dd1a1 !important;
  text-decoration: underline !important;
}

/* Komunikaty błędów */
.alert,
.error,
.alert-danger {
  background-color: rgba(169, 68, 66, 0.9) !important;
  border: 1px solid #d32f2f !important;
  border-radius: 6px !important;
  color: #f2dede !important;
  padding: 15px !important;
  margin: 15px 0 !important;
}

/* Komunikaty sukcesu */
.alert-success {
  background-color: rgba(60, 118, 61, 0.9) !important;
  border: 1px solid #43a047 !important;
  border-radius: 6px !important;
  color: #dff0d8 !important;
  padding: 15px !important;
  margin: 15px 0 !important;
}

/* Tabele (jeśli występują na stronie logowania) */
table {
  background-color: transparent !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

td, th {
  padding: 10px !important;
  border: none !important;
  color: #e6e6e6 !important;
}

td.category {
  background-color: transparent !important;
  color: #e6e6e6 !important;
  font-weight: 500 !important;
  vertical-align: top !important;
  padding-right: 15px !important;
}

/* Responsywność dla urządzeń mobilnych */
@media (max-width: 768px) {
  .login-box,
  .form-container,
  .widget-box {
    margin: 20px !important;
    padding: 20px !important;
    max-width: calc(100% - 40px) !important;
  }
  
  .widget-header,
  .login-header {
    margin: -20px -20px 20px -20px !important;
    padding: 15px !important;
    font-size: 16px !important;
  }
  
  .login-logo {
    margin: 20px 0 !important;
    padding: 10px !important;
  }
  
  .login-logo img {
    max-width: 140px !important;
    max-height: 40px !important;
  }
}

@media (max-width: 480px) {
  .form-control,
  input[type="text"],
  input[type="password"],
  input[type="email"] {
    padding: 10px 12px !important;
    font-size: 16px !important; /* Zapobiega zoom na iOS */
  }
  
  .btn,
  .btn-primary,
  input[type="submit"],
  button {
    padding: 12px 20px !important;
    font-size: 16px !important;
  }
}

/* Animacja ładowania */
.login-box,
.form-container,
.widget-box {
  animation: fadeInUp 0.6s ease-out !important;
}

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

/* Dodatkowe elementy Siemens branding */
.login-box::before,
.form-container::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #00d4aa, transparent, #1dd1a1, transparent, #00d4aa);
  border-radius: 10px;
  z-index: -1;
  animation: borderGlow 3s linear infinite;
}

@keyframes borderGlow {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}