/* assets/css/custom.css - Enterprise Medical UI & Fluid Micro-Interaction Engine */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --brand-dark: #0A3A2A;
    --brand-primary: #0F5132;
    --brand-emerald: #10B981;
    --brand-light: #E8F5E9;
    --brand-bg: #F4F7F6;
    --card-border: #E2E8F0;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   1. UNIVERSAL CLICK RIPPLE & TACTILE MICRO-INTERACTIONS
   ============================================================ */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.35) 0%, rgba(16, 185, 129, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
    transform: scale(0);
    animation: rippleAnimation 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    pointer-events: none;
    z-index: 50;
}

.dark .ripple-effect {
    background: radial-gradient(circle, rgba(52, 211, 153, 0.3) 0%, rgba(16, 185, 129, 0.12) 50%, rgba(255, 255, 255, 0) 100%);
}

@keyframes rippleAnimation {
    0% {
        transform: scale(0);
        opacity: 0.85;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        transform: scale(3.5);
        opacity: 0;
    }
}

/* Tactile Spring Press Physics on all interactive elements */
button,
a,
input[type="submit"],
input[type="button"],
[role="button"],
.cursor-pointer,
.nav-item-active,
.nav-item-inactive,
.mobile-tab-btn {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.22s ease,
                border-color 0.22s ease,
                color 0.22s ease,
                opacity 0.2s ease;
}

button:active:not(:disabled),
a:active:not(:disabled),
input[type="submit"]:active:not(:disabled),
[role="button"]:active,
.cursor-pointer:active {
    transform: scale(0.965);
}

/* ============================================================
   2. GPU-ACCELERATED VIEW TRANSITION API (CIRCULAR RIPPLE THEME)
   ============================================================ */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 99999;
}

/* Targeted Smooth CSS Transition for Structural Elements */
body,
main,
aside,
header,
footer,
nav,
input,
select,
textarea,
.bg-white,
.dark\:bg-slate-900,
.bg-slate-50,
.dark\:bg-slate-800,
.border-slate-200,
.dark\:border-slate-800,
.border-slate-100,
.dark\:border-slate-700 {
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

canvas {
    transition: none !important;
}

/* ============================================================
   3. SMOOTH CONTENT & SCREEN TRANSITIONS
   ============================================================ */
.fade-in-up {
    animation: fadeInUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth Screen Transitions in Mobile Simulator & Tabs */
.mobile-screen-pane:not(.hidden) {
    animation: screenSlideFade 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes screenSlideFade {
    from {
        opacity: 0;
        transform: scale(0.985) translateY(4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

.dark ::-webkit-scrollbar-thumb {
    background: #1E293B;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* Elegant Sidebar Scrollbar */
.custom-sidebar-scroll {
    scrollbar-width: thin;
    scrollbar-color: #0f5132 transparent;
}
.custom-sidebar-scroll::-webkit-scrollbar {
    width: 4px;
}
.custom-sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.custom-sidebar-scroll::-webkit-scrollbar-thumb {
    background: #0f5132;
    border-radius: 4px;
}
.custom-sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: #10B981;
}

/* Active navigation item styling */
.nav-item-active {
    background-color: #0c432b;
    border-left: 4px solid #10B981;
    color: #FFFFFF !important;
    font-weight: 600;
}

.nav-item-inactive {
    color: #94A3B8;
    transition: all 0.2s ease-in-out;
}
.nav-item-inactive:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
}

/* ============================================================
   4. ANTI-GLITCH FLUID MODAL TRANSITIONS (SPRING & BACKDROP)
   ============================================================ */
.modal-backdrop-animate {
    animation: backdropFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-backdrop-exit {
    animation: backdropFadeOut 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes backdropFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

@keyframes backdropFadeOut {
    from {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
    to {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

.modal-dialog-animate {
    animation: modalSpringIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.modal-dialog-exit {
    animation: modalSpringOut 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes modalSpringIn {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(12px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalSpringOut {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.94) translateY(8px);
    }
}

/* ============================================================
   5. SILKY TAB & VIEW-MODE TRANSITIONS (PREVENTS CONTENT JUMP)
   ============================================================ */
.tab-pane-transition,
.view-mode-transition {
    animation: contentSlideFade 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes contentSlideFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   6. PREMIUM CARD ELEVATION, HOVER GLOW & GLITCH-FREE INTERACTION
   ============================================================ */
.vendor-card,
.stat-card,
.interactive-card,
.vendor-item-card,
.vendor-item-row {
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.22s ease,
                background-color 0.22s ease !important;
}

.vendor-card:hover,
.stat-card:hover,
.interactive-card:hover,
.vendor-item-card:hover {
    transform: translateY(-2.5px);
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
}

.dark .vendor-card:hover,
.dark .stat-card:hover,
.dark .interactive-card:hover,
.dark .vendor-item-card:hover {
    box-shadow: 0 14px 35px -8px rgba(0, 0, 0, 0.5), 0 0 20px 2px rgba(16, 185, 129, 0.08);
}

.vendor-item-row:hover {
    background-color: rgba(16, 185, 129, 0.04) !important;
}

.dark .vendor-item-row:hover {
    background-color: rgba(16, 185, 129, 0.08) !important;
}

/* Shimmer Skeleton Loading Effect */
.shimmer-placeholder {
    background: linear-gradient(90deg, rgba(241, 245, 249, 0.6) 25%, rgba(226, 232, 240, 0.8) 50%, rgba(241, 245, 249, 0.6) 75%);
    background-size: 200% 100%;
    animation: shimmerSlide 1.5s infinite;
}

.dark .shimmer-placeholder {
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.6) 25%, rgba(51, 65, 85, 0.8) 50%, rgba(30, 41, 59, 0.6) 75%);
    background-size: 200% 100%;
    animation: shimmerSlide 1.5s infinite;
}

@keyframes shimmerSlide {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Glowing Live Pulses */
.live-pulse-badge {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Print Styles for 80mm Thermal & A4 Official Invoices */
@media print {
    body * {
        visibility: hidden !important;
    }
    #thermalReceiptArea, #thermalReceiptArea *,
    #a4InvoiceArea, #a4InvoiceArea * {
        visibility: visible !important;
    }
    #thermalReceiptArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 80mm;
        margin: 0;
        padding: 10px;
    }
    #a4InvoiceArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 24px;
        border: none !important;
    }
}

/* Mobile Scroll Utilities & Touch Optimization */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.custom-sidebar-scroll,
.overflow-x-auto,
.overflow-y-auto {
    -webkit-overflow-scrolling: touch;
}