@import "tailwindcss";
@import "./pagy-nav.css";
@theme {
    /* Colours - General */
    --color-btn-dark: oklch(0.1822 0 0);
    --color-peak-red: oklch(0.6117 0.2289 24.66);
    --color-grey-custom: oklch(0.9791 0 0);
    --color-dark-custom: oklch(0.1822 0 0);
    --color-dark-grey: oklch(0.6797 0 0);
    --color-subtext-grey: oklch(0.7763 0 0);
    --color-blue-dark: oklch(0.6321 0.2018 254.09);
    --color-blue-light: oklch(0.9504 0.0254 244.42);
}

.product-details > ul {
    list-style: disc;
    padding-left: 20px;
}

@layer utilities {
    .card {
        @apply bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300;
    }

    .card-header {
        @apply p-6 border-b border-gray-100;
    }

    .card-body {
        @apply p-6;
    }

    .card-footer {
        @apply p-6 border-t border-gray-100;
    }

    /* Variants */
    .card-basic {
        @apply bg-white border border-gray-200;
    }

    .card-elevated {
        @apply shadow-lg;
    }

    .card-primary {
        @apply border-l-4 border-l-blue-500;
    }

    .card-success {
        @apply border-l-4 border-l-green-500;
    }

    .card-warning {
        @apply border-l-4 border-l-yellow-500;
    }

    .card-danger {
        @apply border-l-4 border-l-red-500;
    }

    .card-dark {
        @apply bg-gray-800 text-white;
    }

    .card-dark .card-header,
    .card-dark .card-footer {
        @apply border-gray-700;
    }

    .card-hover {
        @apply hover:shadow-md hover:-translate-y-0.5;
    }

    .card-interactive {
        @apply cursor-pointer hover:shadow-md active:scale-[0.99];
    }

    button[type="button"],
    button[type="submit"],
    input[type="submit"] {
        @apply transform transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:opacity-95;
    }

    /* Text classes */

    .page-header-styling {
        @apply text-2xl font-medium text-dark-custom pb-5
    }
    .product-label-styling {
        @apply text-2xl font-light text-dark-custom pb-5
    }

    .card-label-styling {
        @apply text-lg text-wrap pb-2 flex flex-col
    }

    .missing-data-text {
        @apply text-xl
    }

    .card-title-styling {
        @apply font-semibold text-gray-900 text-lg truncate
    }

    th {
      @apply  text-start
    }

    /* Input element stylings */
    .text-area-styling {
        @apply resize-none !h-30
    }

    .disabled-input-custom-styling {
        @apply w-full h-8 rounded-md border border-gray-200 bg-gray-100 ps-2 text-gray-500 cursor-not-allowed
    }

    .input-custom-styling {
        @apply w-full h-10 rounded-md border border-gray-300 bg-white ps-2 text-gray-900 transition focus:outline-none focus:border-dark-custom focus:ring-1 focus:ring-dark-custom
    }

    .label-custom-styling {
        @apply text-dark-custom
    }

    .btn-dark-styling {
        @apply inline-flex items-center justify-center gap-2 bg-dark-custom border border-dark-custom text-white rounded-md px-3 py-1.5 text-sm font-medium shadow-sm transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-dark-custom focus:ring-offset-1 transform transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:opacity-95
    }

    .btn-outline-styling {
        @apply inline-flex items-center justify-center gap-2 bg-white border border-dark-custom text-dark-custom rounded-md px-3 py-1.5 text-sm font-medium shadow-sm transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-dark-custom focus:ring-offset-1 hover:bg-dark-custom hover:text-white transform transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:opacity-95
    }

    .btn-danger-styling {
        @apply inline-flex items-center justify-center gap-2 bg-peak-red border border-peak-red text-white rounded-md px-3 py-1.5 text-sm font-medium shadow-sm transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-peak-red focus:ring-offset-1 transform transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:opacity-95
    }

    .btn-back-styling {
        @apply inline-flex items-center justify-center gap-2 bg-gray-100 border border-gray-200 text-gray-600 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors duration-150 shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-1 hover:bg-gray-200 hover:text-dark-custom transform transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:opacity-95
    }

    .btn-blue-styling {
        @apply bg-blue-dark border-1 border-blue-dark text-white rounded-sm px-4 py-2 text-lg cursor-pointer block hover:bg-white hover:border-dark-custom hover:text-dark-custom transform transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:opacity-95
    }

    .svg-styling:hover {
        @apply bg-dark-custom rounded-full stroke-white
    }

    .modal.show {
        @apply !opacity-100 !pointer-events-auto
    }

    .customModalPanel.show {
        @apply !opacity-100 scale-95 transition-all duration-300
    }

    @keyframes move-alert {
        0%   { transform: translateX(100%); opacity: 0; } 
        10%  { transform: translateX(0%); opacity: 1; }  
        90%  { transform: translateX(0%);  opacity: 1; }              
        100% { transform: translateX(100%); opacity: 0;}    
    }

    .animate-move-alert {
        @apply transform block;
        animation: move-alert 4s ease-in-out forwards;
    }

    /* Peak Stylings */
    .peak-btn {
        @apply cursor-pointer border border-btn-dark bg-btn-dark text-base text-white rounded-md flex flex-row items-center
        py-2 px-4
    }
}