/*
 * Orixs Login Page Branding v2
 * Applied on dev.orixs.io, insurance.orixs.io, construction.orixs.io
 * Loaded by auth.blade.php if this file exists in /public/css/
 */

/* --- Brand Colors --- */
:root {
  --orixs-blue: #1a2b8f;
  --orixs-red: #e63333;
  --orixs-purple: #7C3AED;
  --orixs-purple-dark: #6D28D9;
  --orixs-purple-light: #8B5CF6;
  --orixs-purple-50: #F5F3FF;
  --orixs-purple-100: #EDE9FE;
  --orixs-purple-200: #DDD6FE;
  --orixs-gray-900: #111827;
  --orixs-gray-600: #4B5563;
  --orixs-gray-400: #9CA3AF;
}

/* --- Page Background --- */
body {
  background: #F8F7FF !important;
  min-height: 100vh;
}

.login_section {
  background: linear-gradient(160deg, #F5F3FF 0%, #EDE9FE 30%, #ffffff 70%) !important;
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* --- Header / Logo area --- */
.login_header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--orixs-purple-100) !important;
  padding: 12px 24px !important;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.06) !important;
  height: 70px !important;
}

/* Logo sizing in header */
.login_header img {
  max-height: 42px !important;
  width: auto !important;
  border-radius: 0 !important;
}

/* Logo is now directly in the img tag */

/* --- Login Card / Container --- */
.login_box {
  border-radius: 20px !important;
  box-shadow: 0 8px 40px rgba(124, 58, 237, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid var(--orixs-purple-100) !important;
  max-width: 440px !important;
  padding: 36px 32px !important;
  background: #ffffff !important;
}

/* --- Login Title --- */
.login_box h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--orixs-gray-900) !important;
  margin-bottom: 8px !important;
  text-align: center !important;
}

/* Add subtitle text */
.login_box h3::after {
  content: 'Access your Orixs workspace';
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--orixs-gray-400);
  margin-top: 6px;
  margin-bottom: 16px;
}

/* --- Form inputs --- */
.login_box input[type="text"],
.login_box input[type="email"],
.login_box input[type="password"],
.form-control {
  border-radius: 12px !important;
  border: 1.5px solid #E5E7EB !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  height: auto !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  background: #FAFAFA !important;
}

.login_box input:focus,
.form-control:focus {
  border-color: var(--orixs-purple) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
  outline: none !important;
  background: #ffffff !important;
}

/* Height-50 override for cleaner input fields */
.height-50 {
  height: 50px !important;
  border-radius: 12px !important;
}

/* --- Labels --- */
.form-group label,
.form-label {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--orixs-gray-600) !important;
  margin-bottom: 6px !important;
  text-transform: none !important;
}

/* --- Primary button (Login / Sign In) --- */
.btn-primary,
.login_box .btn,
button[type="submit"],
input[type="submit"] {
  background: linear-gradient(135deg, var(--orixs-purple) 0%, var(--orixs-purple-dark) 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 12px 24px !important;
  transition: all 0.2s ease !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25) !important;
}

.btn-primary:hover,
.login_box .btn:hover,
button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--orixs-purple-dark) 0%, #5B21B6 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35) !important;
}

.btn-primary:active,
button[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2) !important;
}

/* --- Secondary button (Sign up as client) --- */
.btn-secondary {
  background: #ffffff !important;
  border: 1.5px solid var(--orixs-purple-200) !important;
  color: var(--orixs-purple) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 20px !important;
  transition: all 0.2s ease !important;
}

.btn-secondary:hover {
  background: var(--orixs-purple-50) !important;
  border-color: var(--orixs-purple) !important;
}

/* --- Social login buttons --- */
.login_box a.mb-3 {
  border-radius: 12px !important;
  border: 1.5px solid #E5E7EB !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  background: #ffffff !important;
  color: var(--orixs-gray-900) !important;
  text-decoration: none !important;
}

.login_box a.mb-3:hover {
  border-color: var(--orixs-purple-200) !important;
  background: var(--orixs-purple-50) !important;
}

.login_box a.mb-3 span {
  margin-right: 10px !important;
}

.login_box a.mb-3 span img {
  width: 20px !important;
  height: 20px !important;
}

/* --- Divider ("or use email") --- */
.login_box p.position-relative {
  color: var(--orixs-gray-400) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* --- Links (Forgot password, etc.) --- */
.login_box a,
.forgot-password a,
a.text-muted {
  color: var(--orixs-purple) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}

.login_box a:hover {
  color: var(--orixs-purple-dark) !important;
}

/* --- Checkbox (Stay logged in) --- */
.custom-control-input:checked ~ .custom-control-label::before,
input[type="checkbox"]:checked {
  background-color: var(--orixs-purple) !important;
  border-color: var(--orixs-purple) !important;
}

/* --- Alert / Error messages --- */
.alert-danger,
.alert-error {
  background: #FEF2F2 !important;
  border: 1px solid #FECACA !important;
  border-radius: 12px !important;
  color: #991B1B !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
}

.alert-success {
  background: #F0FDF4 !important;
  border: 1px solid #BBF7D0 !important;
  border-radius: 12px !important;
  color: #166534 !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
}

.alert-dismissible {
  border-radius: 12px !important;
}

/* --- Sign up for free link --- */
.login_box div[style*="border-top"] {
  border-top-color: var(--orixs-purple-100) !important;
}

.login_box div[style*="border-top"] a {
  color: var(--orixs-purple) !important;
  font-weight: 600 !important;
  transition: color 0.2s !important;
}

.login_box div[style*="border-top"] a:hover {
  color: var(--orixs-purple-dark) !important;
}

/* --- Invalid feedback --- */
.invalid-feedback {
  font-size: 12px !important;
  color: #DC2626 !important;
  margin-top: 4px !important;
}

/* --- Mobile app card (below login) --- */
.login_box.card {
  border-radius: 16px !important;
  border: 1px solid var(--orixs-purple-100) !important;
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.06) !important;
}

.login_box.card .card-title {
  color: var(--orixs-gray-900) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

/* --- Language flags section --- */
.change-lang {
  color: var(--orixs-gray-600) !important;
  transition: color 0.2s !important;
}

.change-lang:hover {
  color: var(--orixs-purple) !important;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--orixs-purple-50);
}

::-webkit-scrollbar-thumb {
  background: var(--orixs-purple-200);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--orixs-purple);
}