/* AutoCusto Professional Medical Design */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Open+Sans:wght@300;400;500;600;700&display=swap');

/* CSS Variables for Professional Medical Palette */
:root {
  --primary-color: #2C3E50; /* Dark Slate Blue - Professional, calming */
  --secondary-color: #3498DB; /* Bright Blue - Complementary, clean */
  --accent-color: #2ECC71; /* Emerald Green - Subtle accent, success */
  --text-primary: #333333; /* Dark Gray - Main text */
  --text-secondary: #666666; /* Medium Gray - Secondary text */
  --bg-light: #F8F9FA; /* Very Light Gray - Background */
  --bg-white: #FFFFFF; /* Pure White */
  --border-color: #E0E0E0; /* Light Gray - Borders */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --border-radius: 8px;
  --transition: all 0.3s ease-in-out;
  
  /* Bootstrap Color Overrides */
  --bs-primary: #2C3E50;
  --bs-primary-rgb: 44, 62, 80;
}

/* Bootstrap Primary Color Override */
.btn-primary,
.bg-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: #34495e !important;
  border-color: #34495e !important;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: #34495e !important;
  border-color: #34495e !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.border-primary {
  border-color: var(--primary-color) !important;
}

/* Button Progress Bar Animations */
@keyframes fillProgress {
  0% { width: 0%; }
  20% { width: 30%; }
  40% { width: 60%; }
  60% { width: 75%; }
  80% { width: 90%; }
  100% { width: 100%; }
}

@keyframes slideProgress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Button loading state with Bootstrap utilities */
.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.progress-bar-animation {
  border-radius: inherit;
  transition: width 0.3s ease;
}

/* Bootstrap-compatible button states */
.btn-submit-process:disabled {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  opacity: 0.75;
}

/* General Body Styles */
body {
  font-family: 'Open Sans', sans-serif;
  color: var(--text-primary);
  line-height: 1.6;
  background-color: var(--bg-light);
  min-height: 100vh; /* Ensure body takes full viewport height */
  padding-top: 5rem; /* Adjust based on your navbar height */
  font-size: 1rem; /* Base font size */
}

/* Headings and Navbar Brand */
h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--primary-color);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Navbar Styling */
.navbar {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  box-shadow: var(--shadow-md);
  padding: 0.75rem 0;
  transition: var(--transition);
}

.navbar-brand {
  color: var(--bg-white) !important;
  font-size: 1.6rem;
  font-weight: 700;
  transition: var(--transition);
}

.navbar-brand:hover {
  opacity: 0.9;
}

.navbar-nav .nav-link {
  color: rgba(255,255,255,0.9) !important;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.6rem 1rem !important;
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.navbar-nav .nav-link:hover {
  background-color: rgba(255,255,255,0.25); /* Slightly more opaque for better hover feedback */
  color: var(--bg-white) !important;
}

/* Dropdown Menus */
.dropdown-menu {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin-top: 0.25rem;
  background-color: var(--bg-white);
  min-width: 160px;
}

.dropdown-item {
  padding: 0.8rem 1.2rem;
  transition: var(--transition);
  font-weight: 400;
  font-size: 1rem;
  color: var(--text-primary);
}

.dropdown-item:hover {
  background: linear-gradient(135deg, var(--bg-light), rgba(52, 152, 219, 0.1));
  color: var(--primary-color);
  transform: translateX(4px);
  border-left: 3px solid var(--primary-color);
  padding-left: 1.5rem;
}

/* Card Styling */
.card {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md); /* Default shadow is now medium */
  transition: var(--transition);
  background-color: var(--bg-white);
  overflow: hidden;
}

.card:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* Stronger shadow on hover */
}

.card-header {
  background-color: var(--primary-color);
  color: var(--bg-white);
  font-weight: 600;
  border-bottom: none;
  padding: 1rem 1.5rem;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.card-body {
  padding: 1.5rem;
}

/* Removed old authenticated-container - now using clean auth-viewport system */

/* Alerts */
.alert {
  border: 1px solid;
  border-radius: var(--border-radius);
  padding: 0.9rem 1.2rem;
  margin: 1rem 0;
  font-weight: 500;
}

.alert-success {
  background-color: #D4EDDA;
  border-color: #C3E6CB;
  color: #155724;
}

.alert-danger {
  background-color: #F8D7DA;
  border-color: #F5C6CB;
  color: #721C24;
}

.alert-warning {
  background-color: #FFF3CD;
  border-color: #FFECB5;
  color: #856404;
}

/* Utility Classes (examples) */
.text-primary-color {
  color: var(--primary-color);
}

.bg-primary-color {
  background-color: var(--primary-color);
  color: var(--bg-white);
}

.shadow-custom {
  box-shadow: var(--shadow-md);
}

.border-radius-custom {
  border-radius: var(--border-radius);
}

/* Hamburger Menu Animation */
.navbar-toggler {
  border: none;
  padding: 0.25rem 0.5rem;
}

.navbar-toggler-icon {
  background-image: none;
  position: relative;
  width: 1.5em;
  height: 2px;
  background-color: white;
  transition: background-color .1s .2s ease-out;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: '';
  display: block;
  position: absolute;
  width: inherit;
  height: inherit;
  background-color: white;
  transition: transform .3s ease-out, top .3s ease-out, opacity .1s ease-out;
}

.navbar-toggler-icon::before {
  top: -6px;
}

.navbar-toggler-icon::after {
  top: 6px;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-color: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  transform: rotate(45deg);
  top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  transform: rotate(-45deg);
  top: 0;
}

/* Hero Jumbotron Styling */
.hero-jumbotron {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white; /* Ensure text is readable */
}

.hero-jumbotron h1, .hero-jumbotron p, .hero-jumbotron hr {
  color: white !important; /* Force text and HR to be white */
  border-color: rgba(255,255,255,0.5) !important; /* Lighter HR */
}

/* Topbar Login Form Styling - Non-invasive to Crispy Forms */
.navbar .form-inline .form-control {
  border: 1px solid rgba(255,255,255,0.3);
  background-color: rgba(255,255,255,0.1);
  color: white;
  transition: var(--transition);
}

.navbar .form-inline .form-control::placeholder {
  color: rgba(255,255,255,0.7);
}

.navbar .form-inline .form-control:focus {
  border-color: rgba(255,255,255,0.6);
  background-color: rgba(255,255,255,0.2);
  box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.25);
  color: white;
}

/* Home page layout improvements */
.hero-section {
  min-height: 85vh;
  display: flex;
  align-items: center;
}

.hero-feature {
  padding: 0.5rem 0;
}

.hero-feature .oi {
  font-size: 1.2rem;
  margin-right: 0.75rem;
  color: var(--secondary-color);
}

/* Registration card specific styling */
.registration-card .card-header {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  border: none;
}

/* Fix registration form header text visibility */
.card-header h3 {
  color: white !important;
}

/* Topbar login form spacing fixes */
.navbar .form-inline {
  margin-right: 1rem;
}

/* Increase login form field widths - much larger for long emails and secure passwords */
.navbar .form-inline .form-control {
  min-width: 250px;
}

.navbar .form-inline .form-control[placeholder="Email"] {
  min-width: 320px;
  max-width: 400px;
}

.navbar .form-inline .form-control[placeholder="Senha"] {
  min-width: 280px;
  max-width: 350px;
}

/* Add margin to navbar brand */
.navbar-brand {
  margin-left: 1rem;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .hero-section .col-lg-6:first-child {
    text-align: center;
    margin-bottom: 2rem;
  }
}

@media (max-width: 768px) {
  body {
    padding-top: 4rem;
  }
  
  /* Removed old authenticated-container media query */
  
  .card-body {
    padding: 1rem;
  }
  
  .hero-section {
    min-height: auto;
    padding: 2rem 0;
  }
  
  .navbar .form-inline {
    flex-direction: column;
    margin-top: 1rem;
  }
  
  .navbar .form-inline .form-control {
    margin-bottom: 0.5rem;
    max-width: 100% !important;
  }
  
  .navbar .form-inline .btn {
    width: 100%;
  }
}