/**
 * Portal Stylesheet
 */

/* Hide Alpine elements before initialization */
[x-cloak] {
    display: none !important;
}

/* Custom Scrollbar */
.rms-portal-root ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.rms-portal-root ::-webkit-scrollbar-track {
    background: transparent;
}
.rms-portal-root ::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 9999px;
}
.rms-portal-root ::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* Transitions & Animations */
.rms-portal-root button,
.rms-portal-root a,
.rms-portal-root input,
.rms-portal-root select,
.rms-portal-root textarea {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.rms-portal-root input:focus,
.rms-portal-root select:focus,
.rms-portal-root textarea:focus {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1) !important;
}

/* Micro-animations */
@keyframes rmsScaleUp {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.rms-scale-up-anim {
    animation: rmsScaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Explicit CSS Grid Layout Fallbacks to resolve theme or CDN compilation conflicts */
.rms-grid {
    display: grid !important;
}

.rms-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.rms-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (min-width: 640px) {
    .sm\:rms-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) {
    .md\:rms-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    .lg\:rms-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .lg\:rms-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .lg\:rms-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }
    .lg\:rms-col-span-7 {
        grid-column: span 7 / span 7 !important;
    }
    .lg\:rms-col-span-5 {
        grid-column: span 5 / span 5 !important;
    }
}

.rms-col-span-full {
    grid-column: 1 / -1 !important;
}

/* Gap Utilities */
.rms-gap-4 {
    gap: 1rem !important;
}
.rms-gap-6 {
    gap: 1.5rem !important;
}
.rms-gap-8 {
    gap: 2rem !important;
}

/* POS Product Cards Custom Rules */
.rms-product-card {
    position: relative !important;
}

.rms-product-card::before,
.rms-product-card::after {
    content: '' !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    border: 2px solid transparent !important;
    pointer-events: none !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    transition: height 0.25s cubic-bezier(0.25, 1, 0.5, 1), width 0.25s cubic-bezier(0.25, 1, 0.5, 1) 0.2s !important;
}

.rms-product-card::before {
    top: -1px !important;
    left: -1px !important;
}

.rms-product-card::after {
    bottom: -1px !important;
    right: -1px !important;
}

.rms-product-card:hover::before {
    width: calc(100% + 2px) !important;
    height: calc(100% + 2px) !important;
    border-top-color: #22c55e !important;
    border-right-color: #22c55e !important;
    transition: width 0.25s cubic-bezier(0.25, 1, 0.5, 1), height 0.25s cubic-bezier(0.25, 1, 0.5, 1) 0.2s !important;
}

.rms-product-card:hover::after {
    width: calc(100% + 2px) !important;
    height: calc(100% + 2px) !important;
    border-bottom-color: #22c55e !important;
    border-left-color: #22c55e !important;
    transition: width 0.25s cubic-bezier(0.25, 1, 0.5, 1), height 0.25s cubic-bezier(0.25, 1, 0.5, 1) 0.2s !important;
}
.rms-line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* POS catalog grid columns */
.rms-pos-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (min-width: 550px) {
    .rms-pos-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 900px) {
    .rms-pos-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Permanent Focus Ring & Outline Override */
.rms-w-full input:focus,
.rms-w-full textarea:focus,
.rms-w-full select:focus,
.rms-w-full button:focus,
.rms-admin-settings input:focus,
.rms-admin-settings textarea:focus,
.rms-admin-settings select:focus,
.rms-admin-settings button:focus {
    box-shadow: none !important;
    outline: none !important;
}