/* Custom modal styling for Add Equipment form */

/* Ensure the modal card fits within the viewport */
#gear-modal .modal-card {
  max-width: 720px !important; /* cap modal width for a sleek look */
  width: 95% !important; /* allow a small margin on mobile/smaller screens */
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: auto !important;
}

/* Make the modal content size dynamically and enable scrolling when needed */
#gear-modal .modal-card {
  height: auto;
}

/* Scrollable body – the part that holds the form fields */
#gear-modal .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem;
}

/* Footer – keep the Cancel/Save buttons together on the right */
#gear-modal .modal-footer-right-buttons {
  display: flex;
  gap: 0.5rem;
}

/* Optional: give a subtle backdrop blur for a premium look */
#gear-modal {
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(4px) !important;
}

/* Fix row widths by accounting for flex gap in column widths */
#gear-modal .form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}

#gear-modal .form-row > .col-12 { width: 100%; }
#gear-modal .form-row > .col-9  { width: calc(75% - 4px); }
#gear-modal .form-row > .col-8  { width: calc(66.66% - 5.33px); }
#gear-modal .form-row > .col-6  { width: calc(50% - 8px); }
#gear-modal .form-row > .col-5  { width: calc(41.66% - 9.33px); }
#gear-modal .form-row > .col-4  { width: calc(33.33% - 10.66px); }
#gear-modal .form-row > .col-3  { width: calc(25% - 12px); }
#gear-modal .form-row > .col-2  { width: calc(16.66% - 13.33px); }

/* Currency input styling with prepended dollar symbol overlay */
.input-currency-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-currency-wrapper .currency-symbol {
  position: absolute;
  left: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  pointer-events: none;
  font-size: 0.9rem;
  opacity: 0.75;
}

.input-currency-wrapper input {
  padding-left: 24px !important;
  width: 100%;
  box-sizing: border-box;
}

/* Ensure all inputs, selects and wrappers fill the column containers */
#gear-modal .form-control,
#gear-modal .form-select,
#gear-modal .input-currency-wrapper {
  width: 100%;
  box-sizing: border-box;
}

/* Consistent styling for readonly calculated fields in the modal */
#gear-modal input[readonly] {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--text-secondary);
  cursor: not-allowed !important;
}
/* Barcode Scanner animations */
@keyframes scan-line-anim {
  0% { top: 5%; }
  50% { top: 95%; }
  100% { top: 5%; }
}

/* Flash animation when scanner successfully scans */
.flash-highlight {
  animation: flash-animation 0.8s ease-out;
}

@keyframes flash-animation {
  0% {
    background-color: var(--primary-light);
    box-shadow: 0 0 16px var(--primary);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

/* Align Purchase Date and standard inputs inside gear-modal */
#gear-modal input.form-control,
#gear-modal select.form-select {
  height: 38px !important;
  box-sizing: border-box !important;
}

#gear-modal input[type="date"].form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 38px !important;
  box-sizing: border-box !important;
  padding: 9px 14px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Responsive scrolling adjustments for iPad and mobile viewports */
@media (max-width: 1025px) {
  #gear-modal .modal-card {
    max-height: 85vh !important;
  }
  #gear-modal .modal-body {
    overflow-y: auto !important;
    padding-bottom: 80px !important;
  }
}

@media (max-width: 1024px) {
    #gear-modal:not(.hidden) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100dvh !important;  /* CRITICAL: Force dynamic viewport tracking to strip out hidden Safari bars */
        width: 100vw !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #gear-modal .modal-card {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        max-height: 85dvh !important; /* Locks the entire card container to 85% of actual visible screen space */
        margin: 0 auto !important;
    }
    #gear-modal .modal-body {
        overflow-y: auto !important;
        flex-grow: 1 !important;
        -webkit-overflow-scrolling: touch !important; /* Force native Apple momentum scroll physics */
        padding-bottom: 40px !important;
    }
}

/* Fix Mobile & iPad Landscape Scroll & Save Button Visibility */
@media (orientation: landscape) {
    #gear-modal:not(.hidden) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100dvh !important; /* Locks centering inside the real usable screen window */
    }
    #gear-modal .modal-card {
        display: flex !important;
        flex-direction: column !important;
        max-height: 85dvh !important; /* Compresses the frame cleanly on horizontal tablet viewports */
        margin: 0 auto !important;
    }
    #gear-modal .modal-body {
        overflow-y: auto !important;
        flex-grow: 1 !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 80px !important;
    }
}

/* --- MOBILE SCANNER DISPLAY QUARANTINE --- */
@media (max-width: 1024px) {
    #barcode-scanner-modal:not(.scanner-active) {
        display: none !important;
        position: fixed !important;
        z-index: -1 !important;
    }
    #barcode-scanner-modal.scanner-active {
        display: flex !important;
        z-index: 10000 !important;
    }
}