/* ==========================================================================
   HJ Cambio - Tailwind CSS Extensions & Custom Components
   This file contains only custom components that cannot be built with Tailwind utilities alone.
   Most styling should be done with Tailwind utility classes directly in .razor files.
   ========================================================================== */

/* ==========================================================================
   Global Resets - Ensure full width layout (AGGRESSIVE RESET)
   ========================================================================== */

* {
    box-sizing: border-box !important;
}

html {
    width: 100% !important;
    max-width: none !important;
    overflow-x: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

body {
    width: 100% !important;
    max-width: none !important;
    overflow-x: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

#app {
    width: 100% !important;
    max-width: none !important;
}

/* Remove any container max-width constraints */
.container,
.container-fluid {
    max-width: none !important;
    width: 100% !important;
}

/* Force main layout to be full width */
main,
.page-wrapper,
.wrapper,
.content-wrapper {
    max-width: none !important;
    width: 100% !important;
}

/* ==========================================================================
   Custom Animations (Not available in Tailwind by default)
   ========================================================================== */

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fadeInRight {
    animation: fadeInRight 0.3s ease-out;
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.progress-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.progress-gradient {
    background: linear-gradient(90deg, #3b82f6, #2563eb, #1d4ed8, #2563eb, #3b82f6);
    background-size: 200% 100%;
    animation: gradient-shift 2s ease infinite;
}

@keyframes scale-in {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-scale-in {
    animation: scale-in 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-in;
}

/* ==========================================================================
   Modal/Dialog Overlay Fix - Critical z-index management
   ========================================================================== */

/* Reset any transform on parent elements that could affect fixed positioning */
#app, #app > *, main, .overflow-auto {
    transform: none !important;
}

/* Modal backdrop - always on top of everything */
.fixed.inset-0.bg-black.bg-opacity-50,
.fixed.inset-0[class*="backdrop"],
.modal-backdrop,
.fixed.inset-0[style*="z-index"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    backdrop-filter: blur(2px);
}

/* Modal content - above backdrop */
.fixed.inset-0 > div,
.modal-dialog,
.modal-content,
div[style*="z-index: 10000"] {
    position: relative;
    z-index: 1000000 !important;
}

/* Ensure modals are always visible and on top */
div[style*="z-index: 9999"] {
    position: fixed !important;
    z-index: 999999 !important;
}

/* ==========================================================================
   Button Styling - Override Bootstrap defaults
   ========================================================================== */

/* Force black background for primary action buttons */
button.bg-gray-900 {
    background-color: #111827 !important;
    color: white !important;
}

button.bg-gray-900:hover {
    background-color: #1f2937 !important;
}

button.bg-gray-900:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: white;
    }
}