/*
 * Batavia ERP - Custom Login Page Styles
 * Module: com.batavia.theme
 */

* {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html,
body {
  width: 100% !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
}

body {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Fixed compact card dimensions matching reference exactly */
.main-login-container,
#client {
  width: 720px !important;
  max-width: 720px !important;
  height: 440px !important;
  max-height: 440px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
  margin: auto !important;
  position: relative !important;
}

/* Left portrait image column */
.auth-side-wrapper {
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  height: 440px !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.auth-side-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Right form column */
.auth-form-wrapper {
  width: 420px !important;
  height: 440px !important;
  padding: 32px 36px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background-color: #ffffff !important;
}

.login-subtitle {
  font-size: 14px !important;
  color: #6b7280 !important;
  font-weight: 400 !important;
  margin-bottom: 20px !important;
  line-height: 1.3 !important;
}

.form-group {
  margin-bottom: 16px !important;
  display: flex !important;
  flex-direction: column !important;
}

.form-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 4px !important;
  display: block !important;
}

.form-control {
  width: 100% !important;
  height: 38px !important;
  padding: 6px 12px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #1f2937 !important;
  background-color: #ffffff !important;
  background-clip: padding-box !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  outline: none !important;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}

.form-control:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.btn-login {
  padding: 8px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background-color: #0d6efd !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.25) !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
  display: inline-block !important;
}

.btn-login:hover {
  background-color: #0b5ed7 !important;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.35) !important;
}

.btn-login:active {
  transform: scale(0.98) !important;
}

.alert-error {
  background-color: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #b91c1c !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  margin-bottom: 12px !important;
}

/* Logo khusus mode mobile (tersembunyi di desktop) */
.mobile-logo {
  display: none !important;
}

/* Responsive Mobile Mode */
@media (max-width: 768px) {
  html,
  body {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
  }

  body {
    padding: 24px 16px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .main-login-container,
  #client {
    width: 100% !important;
    max-width: 380px !important;
    height: auto !important;
    max-height: none !important;
    flex-direction: column !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    margin: auto !important;
  }

  .auth-side-wrapper {
    display: none !important;
  }

  .auth-form-wrapper {
    width: 100% !important;
    height: auto !important;
    padding: 32px 24px !important;
    justify-content: flex-start !important;
  }

  .mobile-logo {
    display: block !important;
    max-width: 145px !important;
    height: auto !important;
    margin-bottom: 14px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  }

  .login-subtitle {
    margin-bottom: 20px !important;
  }
}

/* Forcefully suppress Openbravo legacy elements */
#OpenbravoLogo_Container,
#CompanyLogo_Container,
#TopLogos_Container,
#SupportLogo_Container,
#BottomLogos_Container,
#sign-in,
#blocker {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: absolute !important;
  visibility: hidden !important;
}