/* Modern Login Page Styles - Government Standard */
:root {
  /* Official Government Palette */
  --primary-color: #1a56db; /* Strong Blue */
  --primary-dark: #1e3a8a;  /* Navy Blue */
  --secondary-color: #0f766e; /* Deep Teal */
  --accent-color: #b45309;  /* Amber/Gold */
  
  --text-primary: #0f172a;  /* High Contrast Dark */
  --text-secondary: #475569; /* Medium Contrast */
  --text-white: #ffffff;
  
  --glass-bg: rgba(255, 255, 255, 0.95); /* High opacity for max readability */
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-panel-bg: rgba(15, 23, 42, 0.6); /* Darker, refined panel */
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  position: relative;
  color: var(--text-primary);
  
  /* Corporate Background */
  background: url('../assets/images/ccmc_bg.png') no-repeat center center fixed;
  background-size: cover;
}

/* Refined Dark Overlay for Contrast */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 58, 138, 0.7) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Remove old animated circles */
.bg-animation { display: none; }

/* Brand Column (Left) */
.brand-column {
  position: relative;
  z-index: 10;
  color: var(--text-white);
  padding-right: 4rem !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh; /* Full height centering */
}

.brand-content-wrapper {
  max-width: 600px;
  text-align: center; /* Center align all content */
}

.logo-container-large {
  width: 140px;
  height: 140px;
  background: #ffffff;
  border-radius: 50%;
  padding: 15px;
  margin: 0 auto 2rem;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid rgba(255, 255, 255, 0.15);
}

.brand-logo {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.main-title {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow: 0 4px 8px rgba(0,0,0,0.4);
  margin-bottom: 1rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.app-name-wrapper {
  margin-bottom: 3rem;
}

.app-name-badge {
  display: inline-block;
  background: linear-gradient(90deg, #f59e0b, #d97706); /* Amber Gradient */
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.tamil-content-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 1rem 1.5rem; /* Reduced vertical padding */
  margin-bottom: 2.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  width: fit-content; /* Ensure container fits content to avoid unnecessary wrapping if max-width permits */
  max-width: 100%; /* Allow it to take up space if needed, up to parent */
  margin-left: auto;
  margin-right: auto;
  min-width: 300px;
}

.slogan-tamil {
  font-size: 1.1rem; /* Decreased from 1.4rem */
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.25rem;
  line-height: 1.4;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  white-space: nowrap; /* Prevent breaking */
}

.slogan-highlight {
  font-size: 0.95rem; /* Decreased from 1.1rem */
  font-weight: 600;
  color: #fcd34d; /* Amber */
  margin-bottom: 0;
  white-space: nowrap; /* Prevent breaking */
}

/* On very small screens, allow wrapping but try to keep it clean */
@media (max-width: 480px) {
  .slogan-tamil, .slogan-highlight {
    white-space: normal;
  }
}

.feature-badges {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.feature-badge {
  background: rgba(15, 23, 42, 0.6);
  color: #e2e8f0;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  backdrop-filter: blur(4px);
}

.feature-badge i {
  color: #38bdf8; /* Light Blue Icon */
}

/* Right Column (Login Card) */
.login-card {
  background: rgba(255, 255, 255, 0.85); /* Increased transparency as requested */
  /* backdrop-filter: blur(16px);  - Optional: re-enable for more glass feel if needed, but solid/semi-transparent checks generic request */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border: 1px solid var(--glass-border);
  border-radius: 16px; /* Slightly less rounded for professional look */
  padding: 3.5rem 3rem;
  width: 100%;
  max-width: 450px;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 10;
}

/* Header Section */
.login-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.logo-container {
  width: 64px;
  height: 64px;
  background: white;
  border-radius: 12px;
  padding: 8px;
  margin: 0 auto 1.25rem;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.project-title {
  color: var(--primary-dark);
  font-size: 1.875rem; 
  font-weight: 700;
  margin-bottom: 0.25rem;
  letter-spacing: -0.01em;
}

.project-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
}

/* Form Styles */
.form-group {
  margin-bottom: 1.5rem;
}

.form-floating > .form-control {
  border: 1px solid var(--input-border);
  background-color: var(--input-bg);
  height: 58px; /* Taller inputs for accessibility */
  border-radius: 8px;
  font-size: 1rem;
  color: var(--text-primary);
  font-weight: 500;
}

.form-floating > .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15); /* Distinct focus ring */
}

.form-floating > label {
  color: var(--text-secondary);
  padding-top: 1.1rem;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  transform: scale(0.85) translateY(-0.75rem) translateX(0.15rem);
  color: var(--primary-color);
  font-weight: 600;
}

.input-icon {
  position: absolute;
  right: 15px; /* Or left depending on design, but previous was right? No, previous was left in one version, right in another. Let's check html */
  /* HTML has icon AFTER label in some versions? No HTML:
     {{ form.username }}
     <label ...>
     <i class ...>
  */
  /* Let's wait. The latest HTML (step 318) has: 
      {{ form.username }}
      <label ...>Username</label>
      <i class="bi bi-person input-icon"></i>
     So icon is after label.
     Standard Bootstrap floating label has label at left.
     Usually icon is at right for this layout?
     Step 318 code:
     <i class="bi bi-person input-icon"></i>
     
     In Step 199 (toggle password implementation), I added toggle to right.
     
     Let's put input-icon at the RIGHT (15px) and Toggle at RIGHT (10px).
     Wait, if both exist (password), one might overlap.
     
     In Step 318:
     <!-- Password -->
     ...
     <i class="bi bi-lock input-icon"></i>
     <button ... id="togglePassword">...
     
     Both are there.
     
     Let's put the Input Icon (User/Lock) on the LEFT for a "Government" look (very standard).
     And Toggle Password on the RIGHT.
  */
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 1.1rem;
  z-index: 5;
  pointer-events: none; /* Let clicks pass through */
}

/* Adjust padding for left icon */
.form-floating > .form-control {
  padding-left: 3rem;
}

.form-floating > label {
  padding-left: 3rem;
}

.form-control:focus ~ .input-icon {
  color: var(--primary-color);
}

/* Password Toggle */
.btn-toggle-password {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  z-index: 10;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-toggle-password:hover {
  color: var(--primary-color);
}

.btn-login {
  background: linear-gradient(180deg, #2563eb, #1e40af); /* Solid gradient */
  font-size: 1.125rem;
  font-weight: 600;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  margin-top: 1rem;
}

.btn-login:hover {
  background: linear-gradient(180deg, #1d4ed8, #1e3a8a);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.btn-login:focus-visible {
  outline: 2px solid offset;
  outline-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.3);
}

/* Security Indicator */
.login-footer {
  margin-top: 2.5rem;
  border-top: 1px solid #e2e8f0;
  padding-top: 1.5rem;
}

.security-indicator {
  font-size: 0.8rem;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #f1f5f9;
  padding: 0.5rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.forgot-password a {
  color: var(--primary-color);
  font-weight: 600;
}

.forgot-password a:hover {
  text-decoration: underline;
  color: var(--primary-dark);
}

/* Form Styles */
.form-group {
  margin-bottom: 1.25rem;
  position: relative;
}

.form-floating > .form-control {
  background: var(--input-bg);
  border: 1px solid rgba(203, 213, 225, 0.6);
  border-radius: 10px;
  height: 52px;
  padding: 1rem 0.75rem;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  font-weight: 500;
  color: var(--text-primary);
}

.form-floating > .form-control:focus {
  background: white;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); 
}

.form-floating > label {
  padding: 0.85rem 0.75rem;
  color: var(--text-secondary);
}

.input-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  z-index: 5;
  transition: color 0.2s;
}

.form-control:focus ~ .input-icon {
  color: var(--primary-color);
}

/* Password Toggle */
.btn-toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  z-index: 10;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.btn-toggle-password:hover {
  color: var(--text-primary);
}

/* Hide the lock icon when toggle is present if needed, 
   but current HTML has lock icon as .input-icon which is effectively 
   replaced by proper padding or positioning. 
   Actually, we need to adjust padding-right for password field to accommodate the button. */
.form-floating > .form-control {
  padding-right: 2.75rem; /* Space for icon/toggle */
}

/* Adjust input icon for password field to avoid overlap if both exist?
   In HTML: <i class="bi bi-lock input-icon"></i> AND button.
   Let's move the input icon to the LEFT for valid UI or keep it right.
   Actually, standard is usually icon left or right.
   Let's move input icons to the LEFT and adjust padding.
*/

.input-icon {
  left: 15px;
  right: auto;
}

.form-floating > .form-control {
  padding-left: 2.75rem;
  padding-right: 1rem;
}

.form-floating > label {
  padding-left: 2.75rem;
}

/* Specific adjustment for password toggle */
.btn-toggle-password {
  right: 10px;
  left: auto;
}

.form-floating > .form-control[type="password"],
.form-floating > .form-control[type="text"] { /* targeting password field specifically if possible via class, but generic is fine */
  padding-right: 2.5rem;
}


.forgot-password {
  text-align: right;
  margin-bottom: 0;
}

.forgot-password a {
  color: var(--primary-color);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.forgot-password a:hover {
  color: var(--primary-dark);
}

/* Submit Button */
.btn-login {
  width: 100%;
  padding: 0.875rem;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
  margin-top: 0.5rem;
}

.btn-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4);
}

.btn-login:active {
  transform: translateY(0);
}

/* Footer Section */
.login-footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.login-footer a {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}

.login-footer a:hover {
  text-decoration: underline;
}

/* Mobile Header (hidden on desktop) */
.mobile-header {
  display: none; /* Hidden by default, shown only on mobile via media query */
  text-align: center;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  margin: 0;
}

.mobile-logo-container {
  width: 80px;
  height: 80px;
  background: #ffffff;
  border-radius: 50%;
  padding: 12px;
  margin: 0 auto;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #fbbf24;
  /* NO ANIMATION - Fixed logo */
}

.mobile-logo-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mobile-app-title {
  font-size: 1.875rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}

.mobile-app-subtitle {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fbbf24;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.03em;
  line-height: 1.2;
}


/* Responsive Adjustments */
@media (max-width: 991px) {
  /* MOBILE ONLY - Desktop completely untouched */
  
  /* Hide desktop elements */
  .brand-column {
    display: none !important;
  }
  
  .login-card .logo-container {
    display: none !important;
  }
  
  /* Show and style mobile header as part of unified card */
  .mobile-header {
    display: block !important;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
  
  /* Full-width mobile container */
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.25rem;
  }
  
  .container-fluid {
    padding: 0 !important;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .row {
    margin: 0 !important;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .col-lg-5 {
    padding: 0 !important;
    max-width: 100% !important;
    display: flex;
    justify-content: center;
  }
  
  /* COMPACT FLOATING MOBILE CARD */
  .login-card {
    max-width: 340px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
  }
  
  /* Compact mobile header inside card */
  .mobile-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
    padding: 1.5rem 1.25rem 1.25rem;
    text-align: center;
    border-bottom: 3px solid #fbbf24;
  }
  
  .mobile-logo-container {
    width: 80px;
    height: 80px;
    margin: 0 auto 0.875rem;
    /* Logo is fixed - no animation */
  }
  
  .mobile-app-title {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
  }
  
  .mobile-app-subtitle {
    font-size: 0.875rem;
  }
  
  /* Compact login header inside card */
  .login-header {
    padding: 1rem 1.25rem 0.5rem;
    text-align: center;
  }
  
  .project-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 0.125rem;
  }
  
  .project-subtitle {
    font-size: 0.8125rem;
    color: #64748b;
    margin-bottom: 0;
  }
  
  /* Compact form section */
  form {
    padding: 0.75rem 1.25rem 1.25rem;
  }
  
  .form-floating {
    margin-bottom: 0.75rem;
  }
  
  .form-floating > .form-control {
    height: 48px;
    font-size: 0.875rem;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    padding-left: 2.5rem;
  }
  
  .form-floating > .form-control:focus {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
  
  .form-floating > label {
    font-size: 0.8125rem;
    color: #64748b;
    padding-left: 2.5rem;
  }
  
  /* Input icons */
  .input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1rem;
    z-index: 10;
  }
  
  /* Forgot password link */
  .text-end {
    margin-bottom: 0.75rem;
  }
  
  .text-end a {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #3b82f6;
  }
  
  /* Compact sign in button */
  .btn-login {
    width: 100%;
    height: 48px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 10px;
    margin-bottom: 0.75rem;
  }
  
  /* Security indicator */
  .security-indicator {
    font-size: 0.75rem;
    padding: 0.5rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
  }
  
  /* Compact footer */
  .login-footer {
    padding: 0 1.25rem 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
  }
  
  .login-footer a {
    font-size: 0.8125rem;
  }
}

@media (max-width: 576px) {
  /* Small mobile - even more compact */
  body {
    padding: 0.5rem;
  }
  
  .login-card {
    max-width: 100%;
    border-radius: 20px;
  }
  
  .mobile-header {
    padding: 1.5rem 1.25rem 1.25rem;
  }
  
  .mobile-logo-container {
    width: 75px;
    height: 75px;
    border-width: 3px;
  }
  
  .mobile-app-title {
    font-size: 1.75rem;
  }
  
  .mobile-app-subtitle {
    font-size: 0.875rem;
  }
  
  .login-header {
    padding: 1.25rem 1.25rem 0;
  }
  
  .project-title {
    font-size: 1.375rem;
  }
  
  .project-subtitle {
    font-size: 0.8125rem;
  }
  
  form {
    padding: 1.25rem;
  }
  
  .form-floating {
    margin-bottom: 0.875rem;
  }
  
  .form-floating > .form-control {
    height: 48px;
    font-size: 0.875rem;
    border-radius: 10px;
  }
  
  .btn-login {
    height: 48px;
    font-size: 0.9375rem;
    border-radius: 10px;
    margin-bottom: 1rem;
  }
  
  .security-indicator {
    font-size: 0.75rem;
    padding: 0.5rem;
    margin-bottom: 1rem;
  }
  
  .login-footer {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 400px) {
  /* Extra small mobile - maximum compactness */
  body {
    padding: 0.375rem;
  }
  
  .login-card {
    border-radius: 18px;
  }
  
  .mobile-header {
    padding: 1.25rem 1rem 1rem;
  }
  
  .mobile-logo-container {
    width: 70px;
    height: 70px;
  }
  
  .mobile-app-title {
    font-size: 1.625rem;
  }
  
  .mobile-app-subtitle {
    font-size: 0.8125rem;
  }
  
  .login-header {
    padding: 1rem 1rem 0;
  }
  
  .project-title {
    font-size: 1.25rem;
  }
  
  form {
    padding: 1rem;
  }
  
  .form-floating {
    margin-bottom: 0.75rem;
  }
  
  .form-floating > .form-control {
    height: 46px;
    font-size: 0.8125rem;
  }
  
  .btn-login {
    height: 46px;
    font-size: 0.875rem;
  }
  
  .login-footer {
    padding: 0 1rem 1rem;
    font-size: 0.75rem;
  }
}