/* assets/css/style.css
 * Theme overrides + basic layout. Bootstrap provides most styling.
 */

/* Make primary and link colors grey (Bootstrap variable overrides) */
:root {
  --bs-primary: #6c757d; /* Bootstrap secondary grey */
  --bs-primary-rgb: 108,117,125;
    --bs-link-color: #6c757d;
    --bs-link-color-rgb: 108,117,125;
  --bs-link-hover-color: #5c636a;


  /* var(--bs-link-color-rgb) */
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(33, 37, 41,1);
    --bs-btn-border-color: rgba(33, 37, 41,1);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(33, 37, 41,.8);
    --bs-btn-hover-border-color: rgba(33, 37, 41,.8);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(33, 37, 41,.8);
    --bs-btn-active-border-color: rgba(33, 37, 41,.8);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(33, 37, 41,1);
    --bs-btn-disabled-border-color: rgba(33, 37, 41,1);
}


body { background-color: #f8f9fa; }
.container, body, html { font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
.dz-message { color: #6c757d; }
.form-section { padding: 1rem; background: #fff; border-radius: .25rem; border: 1px solid #e9ecef; }
.form-section + .form-section { margin-top: 1rem; }
.required::after { content: '*'; color: #dc3545; margin-left: .25rem; }


.navbar>.container {align-items: flex-end; }

.nav-link {padding-bottom:0;
color:#fff;font-weight: 900;font-size: 12px;text-transform: uppercase;}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        align-items: flex-end;
    }
}
.navbar-text {
    padding-bottom: 0;
}

/* Desktop form layout: label and input side-by-side; help text below input */
@media (min-width: 1024px) {
  .form-section .mb-3 {
    display: grid;
    grid-template-columns: 30% 1fr;
    column-gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  .form-section .mb-3 .form-label { grid-column: 1; grid-row: 1; margin-bottom: 0; text-align: right; }
  .form-section .mb-3 .form-control,
  .form-section .mb-3 .form-select,
  .form-section .mb-3 .dropzone { grid-column: 2; grid-row: 1; }
  .form-section .mb-3 .form-text { grid-column: 2; grid-row: 2; margin-top: .25rem; }
  .form-section .mb-3 hr,
  .form-section .mb-3 .h6 { grid-column: 1 / -1; }
}

/* Fixed bottom action bar */
.fixed-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: rgba(255,255,255,.95);
  border-top: 1px solid #e9ecef;
  padding: 1rem 0;
  box-shadow: 0 -0.5rem 1rem rgba(0,0,0,.1);
  backdrop-filter: blur(10px);
}

/* Add bottom padding to main content to prevent overlap */
main {
  padding-bottom: 120px; /* Increased for navigation buttons */
}

/* Make main.container full-width */
main.container {
  max-width: 100% !important;
  width: 100% !important;
}

/* Field highlighting animation */
@keyframes field-highlight {
  0% { 
    background-color: #fff3cd; 
    border-color: #ffc107; 
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
  }
  50% { 
    background-color: #fff3cd; 
    border-color: #ffc107; 
    box-shadow: 0 0 0 0.4rem rgba(255, 193, 7, 0.25);
  }
  100% { 
    background-color: transparent; 
    border-color: #ced4da; 
    box-shadow: none;
  }
}

.field-highlight {
  animation: field-highlight 1.5s ease-out;
}

/* Field navigation styling */
.field-navigation {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.5rem;
}

.field-nav-link {
  color: #6c757d;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
}

.field-nav-link:hover {
  color: #495057;
  background-color: #f8f9fa;
  text-decoration: none;
}

.field-nav-link:disabled,
.field-nav-link[style*="display: none"] {
  color: #dee2e6;
  cursor: not-allowed;
}

/* Footer spacing when scrolled to bottom */
body.scrolled-to-bottom .fixed-bottom-bar {
  bottom: 60px; /* Adjust based on your footer height */
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .fixed-bottom-bar .row {
    text-align: center;
  }
  
  .fixed-bottom-bar .col-md-4 {
    margin-bottom: 0.5rem;
  }
  
  .fixed-bottom-bar .col-md-4:last-child {
    margin-bottom: 0;
  }
  
  .fixed-bottom-bar .btn {
    width: 100%;
    margin-bottom: 0.25rem;
  }
  
  .fixed-bottom-bar .btn:last-child {
    margin-bottom: 0;
  }
}

/* Global alerts (fixed position) */
#global-alerts {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 640px);
  z-index: 1060;
  pointer-events: none;
}
#global-alerts .alert {
  pointer-events: auto;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}


.list-group-item p {margin-top:10px}


#appForm {margin-bottom: 120px;}

/* Section headings rendered as <h2 class="h6"> */
h2.h6 {
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #495057;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: .25rem;
  margin-bottom: .75rem;
}

/* Show navbar dropdown on hover (desktop) */
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0; /* align flush under link */
  }
}