/**
 * Dialog CSS - Native Dialog API styling
 * 
 * Classes:
 *   .modal-bottom-sheet - Mobile bottom, desktop centered
 *   .modal-confirm - Centered confirmation dialog
 *   .modal-action-sheet - Mobile-only action menu
 *   .modal-danger - Red accent variant
 *   .modal-size-{sm|md|lg|xl|2xl|full} - Desktop max-width
 */

/* ========================================
   BASE DIALOG RESET
   ======================================== */

dialog {
    border: none;
    padding: 0;
    /* margin: 0 - REMOVED! Breaks desktop centering with fixed positioning */
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    overflow: visible;
    -webkit-tap-highlight-color: transparent; /* Native feel for taps */
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

dialog:not([open]) {
    display: none;
}

/* Remove default focus outline, we handle it ourselves */
dialog:focus {
    outline: none;
}


/* ========================================
   BOTTOM SHEET MODAL
   ======================================== */

.modal-bottom-sheet[open] {
    /* Mobile: Full width, anchored to bottom */
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto auto 0;
    
    /* Explicit anchoring to prevent gaps on some browsers */
    position: fixed;
    inset: auto 0 0;
    
    /* Dynamic height handling */
    height: auto;
    max-height: 85dvh;
    
    /* Prevent body scroll chaining on iOS */
    overscroll-behavior: none;
    touch-action: none; /* Let JS handle swipe, prevent browser scroll */
}

.modal-action-sheet[open] {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto auto 0;
    max-height: 80vh;
    max-height: 80dvh;
}

.modal-bottom-sheet .modal-container {
    background: rgb(15, 23, 42); /* slate-900 */
    border-top: 1px solid rgb(71, 85, 105); /* slate-600 */
    border-radius: 1.5rem 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: 100%; /* Fill the dialog's max-height */
    overflow: hidden;
    transition: transform 100ms ease-out;
    
    /* Safe area handled by .modal-footer instead to avoid double padding */
}

/* Desktop: Centered modal - HIGHER SPECIFICITY TO OVERRIDE MOBILE */
@media (min-width: 768px) {
    dialog.modal-bottom-sheet[open] {
        /* CRITICAL: Completely reset inset FIRST */
        inset: unset !important;
        
        /* CRITICAL: Keep fixed for overlay behavior */
        position: fixed !important;
        
        /* Transform-based centering (classic method) */
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        
        /* Sizing */
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
        max-height: 85vh !important;
    }
    
    .modal-bottom-sheet .modal-container {
        /* Constrain modal-container size */
        width: 90vw; /* Default width (90% of viewport) */
        max-width: 36rem; /* Default max-width (xl size) */
        max-height: 85vh;
        
        /* Visual styling */
        border: 1px solid rgb(71, 85, 105); /* slate-600 */
        border-radius: 0.5rem;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }
}

/* Size variants (desktop only) - Applied to .modal-container */
@media (min-width: 768px) {
    .modal-size-sm .modal-container { max-width: 24rem; }   /* 384px */
    .modal-size-md .modal-container { max-width: 28rem; }   /* 448px */
    .modal-size-lg .modal-container { max-width: 32rem; }   /* 512px */
    .modal-size-xl .modal-container { max-width: 36rem; }   /* 576px - DEFAULT */
    .modal-size-2xl .modal-container { max-width: 42rem; }  /* 672px */
    .modal-size-3xl .modal-container { max-width: 48rem; }  /* 768px */
    .modal-size-4xl .modal-container { max-width: 56rem; }  /* 896px */
    .modal-size-5xl .modal-container { max-width: 64rem; }  /* 1024px */
    .modal-size-6xl .modal-container { max-width: 72rem; }  /* 1152px */
    .modal-size-7xl .modal-container { max-width: 80rem; }  /* 1280px */
    .modal-size-full .modal-container { max-width: calc(100vw - 2rem); }
}


/* ========================================
   CONFIRM DIALOG
   ======================================== */

.modal-confirm[open] {
    /* Flexbox centering approach */
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    background: transparent !important;
    padding: 1rem;
    box-sizing: border-box;
}

.modal-confirm .modal-container {
    background: rgb(15, 23, 42); /* slate-900 */
    border: 1px solid rgb(51, 65, 85); /* slate-700 */
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    width: 100%;
    max-width: 28rem;
    max-height: calc(100vh - 2rem);
}

.modal-confirm.modal-danger .modal-container {
    border-color: rgb(220, 38, 38); /* red-600 */
}


/* ========================================
   ACTION SHEET (Mobile only)
   ======================================== */

.modal-action-sheet {
    width: 100%;
    margin: auto auto 0;
    max-height: 80vh;
    max-height: 80dvh;
}

.modal-action-sheet .modal-container {
    background: rgba(15, 23, 42, 0.95); /* slate-900 with transparency */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem 2rem 0 0;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    max-height: 80dvh;
    overflow: hidden;
    transition: transform 100ms ease-out;
}


/* ========================================
   COMMON ELEMENTS
   ======================================== */

/* Handle bar for swipe */
.modal-handle {
    width: 100%;
    padding: 1rem 0 0.5rem;
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
}

.modal-handle:active {
    cursor: grabbing;
}

.handle-bar {
    width: 4rem;
    height: 0.375rem;
    background: rgb(51, 65, 85); /* slate-700 */
    border-radius: 9999px;
    margin: 0 auto;
}

/* Header */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    padding-top: 0;
    flex-shrink: 0;
    touch-action: none;
}

/* Safe area for iOS home indicator on bottom-sheet modals (mobile only) */
/* !important needed to override inline Tailwind p-4/pb-X on individual modal footers */
.modal-bottom-sheet .modal-footer,
.modal-action-sheet .modal-footer {
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
}

@media (min-width: 768px) {
    .modal-bottom-sheet .modal-footer,
    .modal-action-sheet .modal-footer {
        /* Desktop has no home indicator */
        padding-bottom: 1rem !important;
    }
}

@media (min-width: 768px) {
    .modal-header {
        justify-content: space-between;
        padding-top: 1rem;
        border-bottom: 1px solid rgb(51, 65, 85); /* slate-700 */
    }
}

.modal-header-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: rgb(248, 250, 252); /* slate-50 */
    line-height: 1.2;
}

.modal-close {
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 0.375rem;
    color: rgb(148, 163, 184); /* slate-400 */
    transition: color 150ms, background-color 150ms;
    flex-shrink: 0;
}

.modal-close:hover {
    color: rgb(226, 232, 240); /* slate-200 */
    background-color: rgba(255, 255, 255, 0.05);
}

/* Body */
.modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Optional utility for bottom safe-area padding if needed on specific bodies */
.modal-body-safe-bottom {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* Custom scrollbar for modal body */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgb(51, 65, 85); /* slate-700 */
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: rgb(71, 85, 105); /* slate-600 */
}

/* Footer */
.modal-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid rgb(51, 65, 85); /* slate-700 */
    flex-shrink: 0;
}

/* Mobile: 2-column grid for buttons */
@media (max-width: 767px) {
    .modal-footer {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
    
    .modal-footer.modal-footer-single {
        grid-auto-columns: 1fr;
    }
}

@media (min-width: 768px) {
    .modal-footer {
        justify-content: flex-end;
    }
}


/* ========================================
   ANIMATIONS
   ======================================== */

/* Bottom sheet slide up - Apple Spring-like */
dialog.modal-bottom-sheet[open],
dialog.modal-action-sheet[open] {
    animation: modal-slide-up 400ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

dialog.modal-bottom-sheet[open]::backdrop,
dialog.modal-action-sheet[open]::backdrop {
    animation: modal-fade-in 400ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

@keyframes modal-slide-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Desktop: NO animation (prevents transform conflicts with centering) */
@media (min-width: 768px) {
    dialog.modal-bottom-sheet[open] {
        /* Simple fade-in only, no transform animation */
        animation: modal-fade-in 0.2s ease-out forwards;
    }
}

/* Confirm dialog scale */
dialog.modal-confirm[open] {
    animation: modal-scale-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

dialog.modal-confirm[open]::backdrop {
    animation: modal-fade-in 0.3s ease-out forwards;
}

@keyframes modal-scale-in {
    from {
        transform: scale(0.9);
        opacity: 0;
        filter: blur(4px);
    }
    to {
        transform: none;
        opacity: 1;
        filter: blur(0);
    }
}

/* Desktop centered modal animation - preserves translate(-50%, -50%) */
@keyframes modal-scale-in-centered {
    from {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
        filter: blur(4px);
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* ========================================
   UTILITY CLASSES FOR MODAL CONTENT
   ======================================== */

/* Padding variants for body */
.modal-body-padded {
    padding: 1rem;
}

@media (min-width: 768px) {
    .modal-body-padded {
        padding: 1.5rem;
    }
}

/* Action button styles inside action sheets */
.modal-action-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    color: rgb(226, 232, 240); /* slate-200 */
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 150ms;
}

.modal-action-item:last-child {
    border-bottom: none;
}

.modal-action-item:hover,
.modal-action-item:active {
    background-color: rgba(255, 255, 255, 0.05);
}

.modal-action-item.active {
    background-color: rgba(255, 255, 255, 0.1);
}

.modal-action-item.danger {
    color: rgb(248, 113, 113); /* red-400 */
}

/* Hide scrollbar completely (useful for swipe-to-delete scroll snapping) */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}