/**
 * GeoFazendas Modal Base - Layout
 * Part of the modal-base component system.
 *
 * Modal container positioning, backdrop overlay, dialog box
 * (mobile-first bottom sheet), and mobile drag handle.
 */

/* ==========================================================================
   Modal Container
   ========================================================================== */

.gf-modal {
  position: fixed;
  inset: 0;
  z-index: var(--gf-modal-z-index);
  display: flex;
  align-items: flex-end; /* Mobile: align to bottom */
  justify-content: center;
  padding: 0;
  margin: 0;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--gf-modal-transition-duration) ease,
              visibility var(--gf-modal-transition-duration) ease;
}

.gf-modal[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Explicit mobile override - ensure full width bottom sheet */
@media (max-width: 767.98px) {
  .gf-modal {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .gf-modal__dialog {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   Backdrop
   ========================================================================== */

.gf-modal__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--gf-modal-backdrop-color);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ==========================================================================
   Dialog (Mobile-First: Bottom Sheet)
   ========================================================================== */

.gf-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0; /* Ensure no margin on mobile for full-width bottom sheet */
  max-height: var(--gf-modal-mobile-max-height);
  background-color: var(--gf-modal-background);
  border-radius: var(--gf-modal-mobile-border-radius) var(--gf-modal-mobile-border-radius) 0 0;
  box-shadow: var(--gf-modal-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  /* Animation: slide up from bottom */
  transform: translateY(0);
  transition: transform var(--gf-modal-transition-duration) var(--gf-modal-transition-easing);
  
  /* Touch handling - pan-y allows vertical scrolling */
  touch-action: pan-y;
  will-change: transform;
}

.gf-modal[aria-hidden="true"] .gf-modal__dialog {
  transform: translateY(100%);
}

/* Dragging state - disable transition for smooth drag */
.gf-modal__dialog.is-dragging {
  transition: none;
}

/* ==========================================================================
   Mobile Drag Handle
   ========================================================================== */

.gf-modal__handle {
  display: flex;
  justify-content: center;
  padding: 0.75rem 1rem 0.25rem;
  cursor: grab;
  touch-action: none;
  flex-shrink: 0;
}

.gf-modal__handle:active {
  cursor: grabbing;
}

.gf-modal__handle-bar {
  width: var(--gf-modal-handle-width);
  height: var(--gf-modal-handle-height);
  background-color: var(--gf-modal-handle-color);
  border-radius: 2px;
  transition: background-color 0.15s ease, width 0.15s ease;
}

.gf-modal__handle:hover .gf-modal__handle-bar,
.gf-modal__handle:active .gf-modal__handle-bar {
  background-color: rgba(0, 0, 0, 0.35);
  width: 50px;
}