body {
    font-family: 'Inter', sans-serif;
       background-color: #18181b !important;
}
#loginModal {
  z-index: 2147483647 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
}

    .shaking-bell {
    display: inline-block;
    animation: bell-shake 1s infinite;
    transform-origin: 50% 0%;
    }

    @keyframes bell-shake {
    0%   { transform: rotate(0deg);}
    10%  { transform: rotate(-18deg);}
    20%  { transform: rotate(14deg);}
    30%  { transform: rotate(-10deg);}
    40%  { transform: rotate(8deg);}
    50%  { transform: rotate(-6deg);}
    60%  { transform: rotate(4deg);}
    70%  { transform: rotate(-2deg);}
    80%  { transform: rotate(1deg);}
    100% { transform: rotate(0deg);}
    }
/* Sale Notification Bar */
#saleNotificationBar {
    position: fixed;
    top: 1.5rem;
    right: -1%;
    width: 400px;
    max-width: 95vw;
    z-index: 9909999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 8px 24px 0 rgba(16, 185, 129, 0.15), 0 1.5px 6px 0 rgba(0,0,0,0.08);
    background: linear-gradient(90deg, #000000 80%, #00813e 100%);
    border-radius: 0.75rem 0.5rem 0.5rem 0.75rem;
    padding: 1.25rem 1.5rem 1.25rem 1.25rem;
    display: none;
    align-items: center;
    gap: 1rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: #eaeaea;
    letter-spacing: 0.01em;
    box-sizing: border-box;
    overflow: hidden;
    backdrop-filter: blur(2px);
    transform: translateX(100%);
    pointer-events: none;
    /* Dynamic border animation for all sides */
    animation: borderColorChange 2.5s linear infinite;
    border: 5px solid;
    border-image: linear-gradient(180deg, #10b981, #3b82f6, #f59e42, #ef4444, #10b981) 1;
}
@keyframes borderColorChange {
    0% {
        border-image: linear-gradient(180deg, #10b981, #3b82f6, #f59e42, #ef4444, #10b981) 1;
    }
    25% {
        border-image: linear-gradient(180deg, #3b82f6, #f59e42, #ef4444, #10b981, #3b82f6) 1;
    }
    50% {
        border-image: linear-gradient(180deg, #f59e42, #ef4444, #10b981, #3b82f6, #f59e42) 1;
    }
    75% {
        border-image: linear-gradient(180deg, #ef4444, #10b981, #3b82f6, #f59e42, #ef4444) 1;
    }
    100% {
        border-image: linear-gradient(180deg, #10b981, #3b82f6, #f59e42, #ef4444, #10b981) 1;
    }
}
#saleNotificationBar::before {
    content: '';
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    background: radial-gradient(circle at 60% 40%, #10b981 70%, #34d399 100%);
    border-radius: 50%;
    box-shadow: 0 0 8px 2px #10b98155;
    flex-shrink: 0;
    animation: pulse-sale-dot 1.2s infinite alternate;
}
@keyframes pulse-sale-dot {
    0% { box-shadow: 0 0 8px 2px #10b98155; }
    100% { box-shadow: 0 0 16px 6px #10b98188; }
}
#saleNotificationBar strong {
    color: #059669;
    font-weight: 700;
    letter-spacing: 0.02em;
}
#saleNotificationBar .notification-action-btn {
    margin-left: auto;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    padding: 0.4rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(16,185,129,0.10);
    transition: background 0.2s, box-shadow 0.2s;
}
#saleNotificationBar .notification-action-btn:hover,
#saleNotificationBar .notification-action-btn:focus {
    background: #059669;
    box-shadow: 0 4px 16px rgba(16,185,129,0.18);
    outline: none;
}

#saleNotificationBar {
    transform: translateX(100%);
    transition: transform 0.3s;
    pointer-events: none;
}
#saleNotificationBar.show {
    transform: translateX(0);
    pointer-events: auto;
    display: flex;
}

.dark #saleNotificationBar {
    background-color: #1f2937; /* gray-800 */
    color: rgb(250, 247, 247);
}

#closeNotificationBtn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280; /* gray-500 */
    transition: color 0.2s ease-in-out;
}

#closeNotificationBtn:hover {
    color: #ef4444; /* red-500 */
}
/* Security Questions Modal - Responsive Styles */
.securityQuestions-model {
    position: fixed;
    padding: 1rem;
    overflow-y: auto;
    transition: all 0.3s ease;
       position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6); /* translucent */
    backdrop-filter: blur(12px);
    z-index: 20000000000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal Content Container */
.securityQuestions-model-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 1.5rem;
    padding: 1.5rem;
    max-width: 32rem;
    width: 100%;
    margin: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: modalSlideIn 0.3s ease-out;
}

/* Slide In Animation */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive Breakpoints */

/* Large Screens (Desktops, 1200px and above) */
@media screen and (min-width: 1200px) {
    .securityQuestions-model-content {
        max-width: 600px;
        padding: 2rem;
    }
    
    .securityQuestions-model-content h3 {
        font-size: 1.75rem;
    }
    
    .securityQuestions-model-content select,
    .securityQuestions-model-content input {
        padding: 0.75rem;
        font-size: 1rem;
    }
}

/* Medium Screens (Tablets, 768px to 1199px) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .securityQuestions-model-content {
        max-width: 550px;
        padding: 1.75rem;
        margin: 1rem;
    }
    
    .securityQuestions-model-content h3 {
        font-size: 1.5rem;
    }
}

/* Small Screens (Large Phones, 480px to 767px) */
@media screen and (min-width: 480px) and (max-width: 767px) {
    .securityQuestions-model {
        padding: 0.75rem;
    }
    
    .securityQuestions-model-content {
        max-width: 95%;
        padding: 1.25rem;
        border-radius: 1rem;
    }
    
    .securityQuestions-model-content h3 {
        font-size: 1.25rem;
    }
    
    .securityQuestions-model-content p {
        font-size: 0.7rem;
    }
    
    .securityQuestions-model-content select,
    .securityQuestions-model-content input {
        padding: 0.6rem;
        font-size: 0.9rem;
    }
    
    .securityQuestions-model-content button {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* Extra Small Screens (Phones below 480px) */
@media screen and (max-width: 479px) {
    .securityQuestions-model {
        padding: 0.5rem;
        align-items: flex-start;
        padding-top: 2rem;
    }
    
    .securityQuestions-model-content {
        max-width: 100%;
        padding: 1rem;
        border-radius: 0.75rem;
    }
    
    .securityQuestions-model-content h3 {
        font-size: 1.1rem;
    }
    
    .securityQuestions-model-content p {
        font-size: 0.65rem;
    }
    
    /* Stack buttons vertically on very small screens */
    .securityQuestions-model-content .flex.gap-3 {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }
    
    .securityQuestions-model-content .flex.gap-3 button {
        width: 100%;
        justify-content: center;
    }
    
    .securityQuestions-model-content select,
    .securityQuestions-model-content input {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    
    .securityQuestions-model-content .space-y-6 {
        gap: 1rem;
    }
    
    /* Make header more compact */
    .securityQuestions-model-content .flex.items-center.justify-between {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }
    
    /* Adjust close button size */
    .securityQuestions-model-content svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* Landscape Mode for Mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .securityQuestions-model {
        align-items: flex-start;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    .securityQuestions-model-content {
        max-width: 80%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 1rem;
    }
    
    .securityQuestions-model-content .space-y-6 {
        gap: 0.75rem;
    }
    
    .securityQuestions-model-content .mt-8 {
        margin-top: 1rem;
    }
    
    .securityQuestions-model-content h3 {
        font-size: 1rem;
    }
}

/* Touch-friendly adjustments for mobile */
@media (hover: none) and (pointer: coarse) {
    .securityQuestions-model-content select,
    .securityQuestions-model-content input,
    .securityQuestions-model-content button {
        min-height: 44px; /* Better touch target size */
    }
    
    .securityQuestions-model-content button {
        padding: 0.75rem 1rem;
    }
}

/* Optional: Dark mode support (if needed) */
@media (prefers-color-scheme: dark) {
    .securityQuestions-model {
        background-color: rgba(0, 0, 0, 0.95);
    }
}

/* Optional: Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .securityQuestions-model-content {
        animation: none;
    }
}

/* Fix for notch devices (iPhone etc.) */
@supports (padding: max(0px)) {
    .securityQuestions-model {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-top: max(1rem, env(safe-area-inset-top));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* Alternative: Mobile-first approach (simpler version) */
/* Use this if you prefer mobile-first design */

.mobile-first-security-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.mobile-first-security-modal .modal-content {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    padding: 20px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

/* Responsive text and spacing */
.mobile-first-security-modal h3 {
    font-size: clamp(1.1rem, 5vw, 1.75rem);
}

.mobile-first-security-modal p {
    font-size: clamp(0.65rem, 3vw, 0.875rem);
}

.mobile-first-security-modal select,
.mobile-first-security-modal input {
    padding: clamp(8px, 2vw, 12px);
    font-size: clamp(0.85rem, 3.5vw, 1rem);
}

.mobile-first-security-modal button {
    padding: clamp(8px, 2vw, 12px) clamp(16px, 4vw, 24px);
    font-size: clamp(0.875rem, 3vw, 1rem);
}

/* Responsive button layout */
@media (max-width: 480px) {
    .mobile-first-security-modal .button-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .mobile-first-security-modal .button-group button {
        width: 100%;
    }
}
.modal-content {
       background-color: #18181b !important;
    padding: 2rem;
    border-radius: 0.75rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    position: relative;
       animation: modalSlideIn 0.3s ease-out;
       border: 1px solid rgb(255, 255, 255);
}
.receipt-content {
       background-color: #ffffff !important;
    padding: 2rem;
    color: #020617 !important;
    border-radius: 0.75rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    position: relative;
       animation: modalSlideIn 0.3s ease-out;
       border: 1px solid rgb(255, 255, 255);
}
.dmodal-content {
       background-color: #18181b !important;
    padding: 2rem;
    border-radius: 0.75rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
    width: 75%;
    max-height: 90%;
    overflow-y: auto;
    position: relative;
       animation: modalSlideIn 0.3s ease-out;
       border: 1px solid rgb(255, 254, 254);
}
.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #4b5563; /* gray-600 */
}
/* Full-screen overlay for home options */

/* Autocomplete suggestions styling */
.autocomplete-suggestions {
    position: absolute;
    background-color: white;
    border: 1px solid #e5e7eb; /* gray-200 */
    border-radius: 0.375rem; /* rounded-md */
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    width: 100%; /* Match input width */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.autocomplete-suggestion-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem; /* sm:text-sm */
    color: #374151; /* gray-700 */
}
.autocomplete-suggestion-item:hover {
    background-color: #f3f4f6; /* gray-100 */
}

/* Low Stock Highlighting */
.low-stock {
    background-color: #540b0b; /* Red-100 for background */
    border-left: 6px solid #f70000; /* Red-500 for left border */
    color: #ffffff; /* Black text for contrast */
}

.notificationjoy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    height: 1.95rem;
    width: 1.95rem;
    background-color: #ef4444; /* Red-500 */
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 2px rgb(0, 37, 220); /* White ring around the dot */
}
svg.h-8.w-8 > path {
      stroke: white;
    }

    button.modal-close-btn {
      font-size: 30px;
      color: #ffffff; /* Example: Increase font size to 30px */
       animation: pulse 2s infinite ease-in-out; 
    }

    @keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05); /* Slightly increase size at 50% of the animation */
    }
    100% {
        transform: scale(1); /* Return to original size at the end */
    }
    }
/* Chart Canvas Styling */
.chart-canvas {
    display: block;
    background-color: #000000;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 1rem;
    width: 100%; /* Ensure canvas is responsive */
    max-width: 100%;
    height: 400px; /* Fixed height, or adjust as needed */
}
/* Dashboard button specific enhancements */
.dashboard-btn {
    position: relative;
    background-size: 200% auto;
    transition: all 0.4s ease;
    min-width: 280px; /* prevents too narrow on small screens */
}

.dashboard-btn:hover {
    background-position: right center;
    box-shadow: 0 15px 25px -10px rgba(139, 92, 246, 0.5);
}

.dashboard-btn .bg-white\/20 {
    backdrop-filter: blur(2px);
}

.dashboard-btn svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    transition: filter 0.3s ease;
}

.dashboard-btn:hover svg {
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.6));
}

/* Ensure the two bottom buttons have equal width */
.grid.md\:grid-cols-2 > button {
    width: 100%;
}
body.night-mode {
    background-color: #18181b !important;
    color: #e5e7eb !important;
}
body.night-mode .bg-white { background-color: #23232a !important; }
body.night-mode .bg-white-800  { background-color: #23232a !important; }
body.night-mode .bg-black-1000 { background-color: #ffffff !important; }
body.night-mode .text-gray-800 { color: #e5e7eb !important; }
body.night-mode .text-gray-802 { color: #e5e7eb !important; }
body.night-mode .text-gray-600 { color: #d1d5db !important; }
body.night-mode .text-gray-500 { color: #ffffff !important; }
body.night-mode .text-blue-700 { color: #ffffff !important; }
body.night-mode .text-gray-700 { color: #ffffff !important; }
body.night-mode .text-base { color: #000000 !important; }
body.night-mode .settingsBtn { color: #ffffff !important; }
body.night-mode .text-gray-700, .autocomplete-suggestion-item { color: #d1d5db !important; }
body.night-mode .bg-gray-50 { background-color: #23232a !important; }
body.night-mode  .bg-white-30, .bg-blue-600 { color: #e5e7eb !important; }
body.night-mode .text-white-805 { color: #000000 !important; }
body.night-mode input,
body.night-mode textarea,
body.night-mode select {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ff0000;
}
        .bg-white { background-color: #23232a !important; }
        .bg-white-800 { background-color: #23232a !important; }
        .bg-gray-50 { background-color: #23232a !important; }
        .text-gray-800, .text-gray-802 { color: #e5e7eb !important; }
        .text-gray-600 { color: #d1d5db !important; }
        .text-gray-500, .text-blue-700, .text-gray-700, .settingsBtn { color: #ffffff !important; }
        .text-base { color: #000000 !important; }  /* keep as is if needed, but adjust later */
        .autocomplete-suggestion-item { color: #d1d5db !important; }
body.night-mode .modal-content { background-color: #23232a !important; color: #e5e7eb !important; }
body.night-mode .dmodal-content { background-color: #23232a !important; color: #e5e7eb !important; }
/* --- Mini Calculator Responsive & Dark Mode Styles --- */
#miniCalculator {
    transition: box-shadow 0.2s, background 0.2s;
    min-width: 220px;
    max-width: 90vw;
    box-sizing: border-box;
}
.autocomplete-suggestion-item {
    /* Existing styles for the suggestion item */
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease; /* Add this line */
    /* You might also have other styles like border, etc. */
}

.autocomplete-suggestion-item:hover {
 background-image: linear-gradient(to right, #ee00ff, #0056b3);
    color: white; /* Consider changing text color for readability */
}
.creditSalesSection :hover {
    background-color: #fb0000; /* gray-100 */
    color: #000000; /* gray-900 */
}
#miniCalculator .calc-btn {
    background: #f3f4f6;
    color: #374151;
    border: none;
    border-radius: 0.375rem;
    padding: 0.5rem 0;
    font-size: 1rem;
    font-family: inherit;
    transition: background 0.2s, color 0.2s;
    outline: none;
}
#miniCalculator .calc-btn:focus,
#miniCalculator .calc-btn:hover {
    background: #bbf7d0; /* green-100 */
    color: #166534;       /* green-800 */
}
#miniCalculator .calc-btn.bg-green-500,
#miniCalculator .calc-btn.bg-blue-500 {
    background: #22c55e; /* green-500 */
    color: #fff;
}
#miniCalculator .calc-btn.bg-green-500:hover,
#miniCalculator .calc-btn.bg-green-500:focus {
    background: #16a34a; /* green-600 */
}
#miniCalculator .calc-btn.bg-blue-500:hover,
#miniCalculator .calc-btn.bg-blue-500:focus {
    background: #2563eb; /* blue-600 */
}
#miniCalculator input[type="text"] {
    background: #f9fafb;
    color: #111827;
    border: 1px solid #e5e7eb;
}
@media (max-width: 500px) {
    #miniCalculator {
        left: 0 !important;
        right: 0 !important;
        width: 98vw !important;
        min-width: 0;
        max-width: 98vw;
        top: 100% !important;
        margin-top: 8px;
        z-index: 9999;
    }
    #miniCalculator .flex {
        flex-direction: column;
    }
    #miniCalculator .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Night Mode for Mini Calculator --- */
body.night-mode #miniCalculator {
    background: #23232a !important;
    border-color: #444;
    color: #e5e7eb;
}
body.night-mode #miniCalculator .calc-btn {
    background: #23232a;
    color: #e5e7eb;
}
body.night-mode #miniCalculator .calc-btn:focus,
body.night-mode #miniCalculator .calc-btn:hover {
    background: #bbf7d0; /* green-100 */
}

.chat-btn-new-message {
    border: 4px solid #f87171 !important; /* Initial Tailwind red-400 */
    box-shadow: 0 0 0 4px #fca5a555, 0 0 10px 2px #f8717188;
    transition: border 0.2s, box-shadow 0.2s;
    animation: chatBtnBorderPulse 2s linear infinite, chatBtnGlowPulse 1.2s ease-in-out infinite alternate;
    position: relative;
    z-index: 1;
}
@keyframes chatBtnBorderPulse {
    0% {
        border-color: #f87171; /* red-400 */
        box-shadow: 0 0 0 4px #fca5a555, 0 0 10px 2px #f8717188;
    }
    25% {
        border-color: #fbbf24; /* yellow-400 */
        box-shadow: 0 0 0 4px #fde68a55, 0 0 14px 4px #fbbf2488;
    }
    50% {
        border-color: #34d399; /* green-400 */
        box-shadow: 0 0 0 4px #6ee7b755, 0 0 18px 6px #34d39988;
    }
    75% {
        border-color: #60a5fa; /* blue-400 */
        box-shadow: 0 0 0 4px #93c5fd55, 0 0 14px 4px #60a5fa88;
    }
    100% {
        border-color: #f87171; /* red-400 */
        box-shadow: 0 0 0 4px #fca5a555, 0 0 10px 2px #f8717188;
    }
}
@keyframes chatBtnGlowPulse {
    0% {
        box-shadow: 0 0 0 4px #fca5a555, 0 0 10px 2px #f8717188;
    }
    100% {
        box-shadow: 0 0 0 8px #fca5a522, 0 0 24px 8px #f87171cc;
    }
}

.modal-overlay {
    position: fixed;
    inset: 0;
  background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    z-index: 20000000000000;
    display: flex;
    align-items: center;
    justify-content: center;
}
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Ensure the table rows look clickable */
#salesHistoryBody tr, #restockHistoryBody tr {
    cursor: pointer;
}
.itemmodal-overlay {
position: fixed;
top: 0px;
left: auto; /* Adjusted to allow right alignment */
right: 0px;
bottom: 0px;
display: flex;
justify-content: center; /* Content inside the modal is horizontally centered */
align-items: center; /* Content inside the modal is vertically centered */
visibility: visible;
opacity: 1;
z-index: 1000;
max-width: 800px; /* Limits the maximum width of the modal */
margin-left: auto; /* Pushes the modal to the right when combined with right:0 and max-width */
}
/* ===================================
   REFUND HISTORY – ADAPTIVE MODAL
=================================== */

.refund-adaptive {
    display: flex;
    transition: opacity 0.3s ease;
}

/* Modal panel */
.refund-adaptive .dmodal-content {
    background: white;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ===============================
   MOBILE + TABLET → SLIDE UP
================================ */
@media (max-width: 1023px) {
    .refund-adaptive {
        align-items: flex-end;
        justify-content: center;
        padding-top: auto;
    }

    .refund-adaptive .dmodal-content {
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        max-width: 100%;
    }

    .refund-adaptive.show .dmodal-content {
        transform: translateY(0);
    }
}

/* ===============================
   DESKTOP → CENTER MODAL
================================ */
@media (min-width: 1024px) {
    .refund-adaptive {
        align-items: center;
        justify-content: center;
    }

    .refund-adaptive .dmodal-content {
        width: 90%;
        max-width: 1100px;
        border-radius: 20px;
        transform: scale(0.95);
        opacity: 0;
    }

    .refund-adaptive.show .dmodal-content {
        transform: scale(1);
        opacity: 1;
    }
}


        .modal-overlay.drawer-modal{
            width: 100%;
       max-width: 800px;
            transform: translateX(100%);
            border-radius: 20px 0 0 20px;
            animation: slideInRight 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
            padding-top: 3rem;
        }

        @media (max-width: 640px) {
            .modal-overlay.drawer-modal .modal-content {
                max-width: 100%;
                border-radius: 20px 0 0 0;
            }
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(0);
            }
        }


.login-Modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.login-Modal .modal-content {
    transform: translateY(40px);
    opacity: 0;
    transition:
        transform 0.35s ease,
        opacity 0.25s ease;
}
.login-Modal:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.login-Modal:not(.hidden) .modal-content {
    transform: translateY(0);
    opacity: 1;
}
@media (max-width: 768px) {
    .login-Modal {
        align-items: flex-end;
    }

    .login-Modal .modal-content {
        width: 100%;
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
    }

    .login-Modal:not(.hidden) .modal-content {
        transform: translateY(0);
    }
}
/* For tablets - make it larger but not full screen */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .login-Modal .modal-content {
        width: 85%;
        max-width: 600px;
        min-width: 400px;
    }
}

/* For very large tablets (iPad Pro) */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
    .login-Modal .modal-content {
        width: 70%;
        max-width: 650px;
        min-width: 450px;
    }
}
.backup-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    min-width: 220px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    user-select: none;
}

.backup-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.backup-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

.backup-btn .btn-text {
    transition: opacity 0.3s ease;
}

.backup-btn .btn-loader {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
}

.backup-btn.loading .btn-text {
    opacity: 0;
}

.backup-btn.loading .btn-loader {
    display: flex;
}

.backup-btn.loading {
    cursor: wait;
    pointer-events: none;
}

.loader-dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: pulse 1.5s infinite ease-in-out;
}

.loader-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.loader-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Success/Error states */
.backup-btn.success {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    animation: success-pulse 0.5s ease;
}

.backup-btn.error {
    background: linear-gradient(135deg, #f44336 0%, #c62828 100%);
    animation: shake 0.5s ease;
}

@keyframes success-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

/* Tooltip */
.backup-btn::after {
    content: "Create backup on USB drive";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: #333;
    color: white;
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1000;
}

.backup-btn:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

/* Responsive */
@media (max-width: 768px) {
    .backup-btn {
        padding: 10px 20px;
        min-width: 200px;
        font-size: 14px;
    }
    
    .backup-btn::after {
        font-size: 11px;
        padding: 5px 10px;
    }
}

.onboarding-Tour{
    position: fixed;
    inset: 0;
    z-index: 999999; /* Use a valid z-index value */
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.onboarding-Tour:not(.hidden) {
    display: flex;
    pointer-events: none; /* Let clicks pass through to page except tooltip */
}

/* Remove pointer-events: none from the overlay so clicks can pass through to buttons */
/* But make the highlight area block clicks to the underlying elements */
#tourHighlight {
    position: absolute;
    border: 3px solid #3b82f6;
    border-radius: 12px;
    pointer-events: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
    z-index: 999999;
}

/* Tooltip needs to be clickable */
#tourTooltip {
    position: absolute;
    pointer-events: auto;
    z-index: 1000000;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    min-width: 280px;
    max-width: 400px;
    padding: 20px;
}

/* Dark mode support */
.dark #tourTooltip {
    background: #1f2937;
    color: white;
}

/* Make buttons within tooltip clickable */
#tourTooltip button {
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    z-index: 1000001;
}

/* Ensure the overlay doesn't block clicks to the tooltip */

/* But the tooltip itself should catch clicks */
#tourTooltip {
    pointer-events: auto;
}

/* Progress dots styling */
#tourProgress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 20px 0;
}

.tour-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #d1d5db;
    transition: all 0.3s ease;
}

.tour-progress-dot.active {
    background-color: #3b82f6;
    transform: scale(1.25);
}

/* Animation for tooltip */
@keyframes tourFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#tourTooltip {
    animation: tourFadeIn 0.3s ease-out;
}

/* ===================================
   RESPONSIVE BREAKPOINTS FOR TOUR
=================================== */

/* Extra Small Screens (Phones below 480px) */
@media (max-width: 479px) {
    #tourTooltip {
        min-width: 90vw;
        max-width: 90vw;
        padding: 16px;
        font-size: 14px;
    }
    
    #tourTooltip h3 {
        font-size: 16px;
        margin-bottom: 10px;
    }
    
    #tourTooltip p {
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    #tourTooltip button {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    #tourProgress {
        gap: 6px;
        margin: 15px 0;
    }
    
    .tour-progress-dot {
        width: 6px;
        height: 6px;
    }
    
    #tourHighlight {
        border: 2px solid #3b82f6;
        border-radius: 8px;
    }
}
@media (max-width: 768px) {
    aside#sidebar-main {
        width: 280px;
    }
}
/* Small to Medium Phones (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    #tourTooltip {
        min-width: 85vw;
        max-width: 85vw;
        padding: 18px;
        font-size: 15px;
    }
    
    #tourTooltip h3 {
        font-size: 17px;
        margin-bottom: 12px;
    }
    
    #tourTooltip p {
        font-size: 15px;
        margin-bottom: 16px;
    }
    
    #tourTooltip button {
        padding: 10px 18px;
        font-size: 14px;
    }
    
    #tourProgress {
        gap: 7px;
        margin: 16px 0;
    }
    
    .tour-progress-dot {
        width: 7px;
        height: 7px;
    }
    
    #tourHighlight {
        border: 2.5px solid #3b82f6;
        border-radius: 10px;
    }
}

/* Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    #tourTooltip {
        min-width: 500px;
        max-width: 80vw;
        padding: 24px;
        font-size: 16px;
    }
    
    #tourTooltip h3 {
        font-size: 20px;
        margin-bottom: 14px;
    }
    
    #tourTooltip p {
        font-size: 16px;
        margin-bottom: 18px;
        line-height: 1.5;
    }
    
    #tourTooltip button {
        padding: 12px 24px;
        font-size: 15px;
        margin-right: 8px;
    }
    
    #tourProgress {
        gap: 8px;
        margin: 20px 0;
    }
    
    .tour-progress-dot {
        width: 8px;
        height: 8px;
    }
    
    #tourHighlight {
        border: 3px solid #3b82f6;
        border-radius: 12px;
    }
}

/* Desktop (1024px - 1366px) */
@media (min-width: 1024px) and (max-width: 1366px) {
    #tourTooltip {
        min-width: 500px;
        max-width: 550px;
        padding: 28px;
        font-size: 16px;
    }
    
    #tourTooltip h3 {
        font-size: 22px;
        margin-bottom: 16px;
    }
    
    #tourTooltip p {
        font-size: 16px;
        margin-bottom: 20px;
        line-height: 1.6;
    }
    
    #tourTooltip button {
        padding: 12px 28px;
        font-size: 15px;
        margin-right: 10px;
    }
    
    #tourProgress {
        gap: 10px;
        margin: 24px 0;
    }
    
    .tour-progress-dot {
        width: 10px;
        height: 10px;
    }
    
    #tourHighlight {
        border: 3px solid #3b82f6;
        border-radius: 14px;
    }
}

/* Large Screens (1366px and above) */
@media (min-width: 1366px) {
    #tourTooltip {
        min-width: 550px;
        max-width: 600px;
        padding: 32px;
        font-size: 17px;
    }
    
    #tourTooltip h3 {
        font-size: 24px;
        margin-bottom: 18px;
    }
    
    #tourTooltip p {
        font-size: 17px;
        margin-bottom: 22px;
        line-height: 1.6;
    }
    
    #tourTooltip button {
        padding: 14px 32px;
        font-size: 16px;
        margin-right: 12px;
    }
    
    #tourProgress {
        gap: 10px;
        margin: 28px 0;
    }
    
    .tour-progress-dot {
        width: 10px;
        height: 10px;
    }
    
    #tourHighlight {
        border: 3px solid #3b82f6;
        border-radius: 16px;
    }
}
.ipAddressModal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 20000000000000;
    display: flex;
    align-items: center;
    justify-content: center;
   
}




@keyframes creditbookColor {
    0%   { background: linear-gradient(90deg, #d946ef, #ec4899); }
    20%  { background: linear-gradient(90deg, #ec4899, #f59e42); }
    40%  { background: linear-gradient(90deg, #f59e42, #10b981); }
    60%  { background: linear-gradient(90deg, #10b981, #6366f1); }
    80%  { background: linear-gradient(90deg, #6366f1, #d946ef); }
    100% { background: linear-gradient(90deg, #d946ef, #ec4899); }
}
.animate-creditbook-color {
    animation: creditbookColor 8s linear infinite;
    background-size: 200% 200%;
    transition: background 0.5s linear;
    }
    .container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 1.5rem;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }
    table {
    border-collapse: collapse;
    width: 100%; /* Keep 100% for responsiveness within its container */
    max-width: 900px; /* New: Set a maximum width for the table */
    margin: 0 auto; /* New: Center the table */
    }
    th, td {
    border: 1px solid #e2e8f0;
    /* Padding moved to Tailwind classes for better control */
    }
    thead th {
    background-color: #f8f8f8;
    font-weight: 600;
    }

    /* Base transition and initial styling for all cards */
    .summary-card {
    transition: all 0.3s ease-in-out; /* Smooth transition for all properties */
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.1); /* Subtle initial border */
    position: relative; /* For potential future pseudo-element animations */
    overflow: hidden; /* Ensures glow doesn't spill over too much */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* More depth to make it "lifted" */
    }

    /* Hover effects for summary cards with glow border */
    .card-hover-green-glow:hover {
    transform: translateY(-5px) scale(1.02); /* Lift and slightly enlarge */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3),
                0 0 0 5px rgba(16, 185, 129, 0.7); /* Stronger overall shadow + green glow border */
    border-color: rgba(16, 185, 129, 0.5); /* Border lights up */
    }
    .card-hover-red-glow:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3),
                0 0 0 5px rgba(239, 68, 68, 0.7);
    border-color: rgba(239, 68, 68, 0.5);
    }
    .card-hover-blue-glow:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3),
                0 0 0 5px rgba(59, 130, 246, 0.7);
    border-color: rgba(59, 130, 246, 0.5);
    }

    /* Tap effect on active state */
    .summary-card:active {
    transform: scale(0.97) translateY(0); /* Sink in slightly */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.2); /* Subtle inner shadow for "pressed" */
    }

    /* Currency and Value Animation */
    .currency-prefix {
    display: inline-block; /* Allows transform */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out, font-size 0.3s ease-out;
    margin-right: 4px; /* Space between symbol and number */
    }

    .summary-value {
    display: inline-block; /* Allows transform */
    transition: transform 0.3s ease-out, font-size 0.3s ease-out;
    }

    .summary-card:hover .currency-prefix {
    transform: translateX(-10px); /* Move left */
    opacity: 0; /* Fade out, giving illusion of symbol integrating or "sliding away" */
    font-size: 0.8em; /* Shrink slightly */
    }

    .summary-card:hover .summary-value {
    transform: translateX(-10px) scale(1.1); /* Move left to fill space and grow */
    font-size: 2.5rem; /* Larger font size on hover */
    }

    /* Keyframes for continuous line movement in Net Profit/Loss icon */
    @keyframes lineMovement {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px); /* Slightly more pronounced vertical movement */
    }
    }

    /* Apply animation to the specific path within the Net Profit/Loss icon */
    .animate-line-move path {
    animation: lineMovement 2s ease-in-out infinite; /* Continuous, smooth movement */
    transform-origin: center center; /* Ensure it moves from its center */
    }

    /* SVG Icon Animation */
    .icon-container {
    transition: transform 0.3s ease-out, filter 0.3s ease-out;
    }
    .summary-card:hover .icon-container {
    transform: rotate(10deg) scale(1.2); /* Rotate and grow more */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); /* Subtle icon glow */
    }

.flash-green-animate {
    animation: flashGreen 1s linear 0s 2 alternate;
}

@keyframes flashGreen {
    0%   { background-color: #bbf7d0; }
    20%  { background-color: #22c55e; }
    40%  { background-color: #3b82f6; }
    60%  { background-color: #f59e42; }
    80%  { background-color: #ef4444; }
    100% { background-color: #bbf7d0; }
}
#stockAddNotice {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  display: none; /* default hidden */
}

#stockAddNotice.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
#stockAddNotice {
  cursor: pointer;
  text-decoration: underline;
}
#stockAddNotice:hover {
  color: #b91c1c; /* darker red on hover */
}
.animate-spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}
@keyframes spin-colors {
    0% {
        border-top-color: #3498db;
        border-right-color: #e67e22;
        border-bottom-color: #2ecc71;
        border-left-color: #e84393;
    }
    25% {
        border-top-color: #e67e22;
        border-right-color: #2ecc71;
        border-bottom-color: #e84393;
        border-left-color: #3498db;
    }
    50% {
        border-top-color: #2ecc71;
        border-right-color: #e84393;
        border-bottom-color: #3498db;
        border-left-color: #e67e22;
    }
    75% {
        border-top-color: #e84393;
        border-right-color: #3498db;
        border-bottom-color: #e67e22;
        border-left-color: #2ecc71;
    }
    100% {
        border-top-color: #3498db;
        border-right-color: #e67e22;
        border-bottom-color: #2ecc71;
        border-left-color: #e84393;
    }
}
#adminPanelModal.show #adminPanelContent {
  transform: translateX(0);
}
#adminPanelModal #adminPanelContent {
  transform: translateX(100%);
}
#adminProfileModal { z-index: 999999999999999999999999999999 !important; }
#salesProfileModal { z-index: 999999999999999999999999999999 !important; }
.admin-glow {
background: linear-gradient(90deg, #2563eb 0%, #f59e42 50%, #ef4444 100%);
opacity: 0.25;
filter: blur(12px);
animation: adminGlowMove 3s linear infinite;
}
@keyframes adminGlowMove {
0% { opacity: 0.25; }
50% { opacity: 0.5; }
100% { opacity: 0.25; }
}
.bg-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0,0,0,0.18); /* Optional: darken a bit */
}
#clearAllNotifBtn {
  margin-bottom: 8px;
  float: right;
}
@keyframes adv-bounce {
  0%, 100% { transform: translateY(0);}
  50% { transform: translateY(-8px);}
}
#openNotesBtn span {
  animation: adv-bounce 1.2s infinite;
}
    @keyframes brick-bounce {
    0%   { transform: translateY(0); filter: brightness(1); }
    20%  { transform: translateY(-18px); filter: brightness(1.8); }
    40%  { transform: translateY(0); filter: brightness(1); }
    60%  { transform: translateY(18px); filter: brightness(1.2); }
    80%  { transform: translateY(0); filter: brightness(1); }
    100% { transform: translateY(0); filter: brightness(1); }
    }

    .brick-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    }

    .brick-reflection {
    width: 18px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    filter: blur(2px);
    transform: scaleX(1.2);
    margin-top: 4px;
    }
    @keyframes gradientMove {
    0% {background-position:0% 50%}
    50% {background-position:100% 50%}
    100% {background-position:0% 50%}
}
.animate-gradient-move {
    animation: gradientMove 4s ease infinite;
}
    @keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
    }
    @keyframes spin-colors {
    0% {
        border-top-color: #3498db;
        border-right-color: #e67e22;
        border-bottom-color: #2ecc71;
        border-left-color: #e84393;
    }
    25% {
        border-top-color: #e67e22;
        border-right-color: #2ecc71;
        border-bottom-color: #e84393;
        border-left-color: #3498db;
    }
    50% {
        border-top-color: #2ecc71;
        border-right-color: #e84393;
        border-bottom-color: #3498db;
        border-left-color: #e67e22;
    }
    75% {
        border-top-color: #e84393;
        border-right-color: #3498db;
        border-bottom-color: #e67e22;
        border-left-color: #2ecc71;
    }
    100% {
        border-top-color: #3498db;
        border-right-color: #e67e22;
        border-bottom-color: #2ecc71;
        border-left-color: #e84393;
    }
    }
    @keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}
@keyframes spin-colors {
    0% {
        border-top-color: #3498db;
        border-right-color: #e67e22;
        border-bottom-color: #2ecc71;
        border-left-color: #e84393;
    }
    25% {
        border-top-color: #e67e22;
        border-right-color: #2ecc71;
        border-bottom-color: #e84393;
        border-left-color: #3498db;
    }
    50% {
        border-top-color: #2ecc71;
        border-right-color: #e84393;
        border-bottom-color: #3498db;
        border-left-color: #e67e22;
    }
    75% {
        border-top-color: #e84393;
        border-right-color: #3498db;
        border-bottom-color: #e67e22;
        border-left-color: #2ecc71;
    }
    100% {
        border-top-color: #3498db;
        border-right-color: #e67e22;
        border-bottom-color: #2ecc71;
        border-left-color: #e84393;
    }
}

    .bg-green-100 {
    background-color: #d1fae5 !important;
    }
    .text-green-900 {
    color: #065f46 !important;
    }
    .bg-red-100 {
    background-color: #fee2e2 !important;
    }
    .text-red-900 {
    color: #7f1d1d !important;
    }
    .text-green-600 {
    color: #16a34a !important;
    }
    .text-red-600 {
    color: #dc2626 !important;
    }
    .bg-green-200 {
    background-color: #bbf7d0 !important;
    }
    .bg-red-200 {
    background-color: #fecaca !important;
    }
    .text-green-700 {
    color: #15803d !important;
    }
    .text-red-700 {
    color: #b91c1c !important;
    }

    /* Loader Spinner */
    .animate-spin {
    border: 8px solid #e5e7eb;
    border-top: 6px solid #a80000;
    color: #0aaff0;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin 1s linear infinite;
    display: inline-block;
    }
    @keyframes spin {
    to { transform: rotate(360deg); }
    }
.clock-container {
            /* Mimicking button padding and rounded corners */
            padding: 8px 16px; /* py-2 px-4 equivalent */
            border-radius: 0.375rem; /* rounded-md equivalent */
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); /* Vibrant gradient */
            background-size: 200% 200%; /* Larger background for animation */
            animation: gradientAnimation 15s ease infinite; /* Smooth gradient animation */
            color: white; /* White text */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle shadow */
            text-align: center;
            transition: background-color 0.3s ease, transform 0.1s ease; /* Smooth transitions */
            cursor: default; /* Not clickable like a button */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 120px; /* Ensure a minimum width for content */
        }

        .clock-container:hover {
            background-color: #2563eb; /* Darker blue on hover */
            transform: translateY(-1px); /* Slight lift effect */
        }

        /* Styling for the time display - scaled down */
        #currentTime {
            font-size: 1em; /* Smaller font size for time */
            font-weight: 600; /* Semi-bold text */
            letter-spacing: 0.5px;
            text-shadow: none; /* Remove heavy text shadow */
            margin-bottom: 2px; /* Reduced space below time */
            line-height: 1.2; /* Adjust line height */
            animation: none; /* Remove pulse animation for a static button look */
        }

        /* Styling for the date display - scaled down */
        #currentDate {
            font-size: 0.75em; /* Smaller font size for date */
            font-weight: 400;
            opacity: 0.9; /* Slightly less transparent */
            text-shadow: none; /* Remove text shadow */
            line-height: 1.2; /* Adjust line height */
        }
                @keyframes gradientAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }


.green-flash {
  animation: flash-green 0.5s ease-in-out; /* Adjust duration and timing as needed */
}

@keyframes flash-green {
  0% { background-color: transparent; } /* Or the table's default background */
  50% { background-color: lightgreen; } /* The flash color */
  100% { background-color: transparent; } /* Return to original */
}
.bg-white.rounded-lg.shadow-xl.w-11\/12.md\:w-3\/4.lg\:w-2\/3.max-h-\[90vh\].flex.flex-col {
  max-height: 90vh; /* Or a similar value that constrains the height */
  overflow: hidden; /* To prevent parent scrollbars */
}

#homeBusinessLogo {
    border: 4px solid transparent; 
    border-radius: 9999px; 
    transition: box-shadow 0.4s, border-color 0.4s, filter 0.4s, transform 0.2s;
    position: relative;
    outline: none; 
}
#homeBusinessLogo:hover,
#homeBusinessLogo:focus-visible {
    box-shadow:
        0 0 0 6px rgba(136, 209, 93, 0.55),  
        0 0 0 12px rgba(239, 68, 68, 0.45),    
        0 0 0 18px rgba(37, 99, 235, 0.45);   
    border-color: #2563eb; 
    filter: hue-rotate(-20deg); 
}
#homeBusinessLogo:hover {
    transform: translateY(-1px);
}
#homeBusinessLogo:focus-visible {
    box-shadow:
        0 0 0 6px rgba(56, 189, 248, 0.6),
        0 0 0 12px rgba(236, 72, 153, 0.45);
    outline: 3px solid #38bdf8;
}
.category-heading {
font-family: 'Poppins', 'Segoe UI', 'Arial', sans-serif;
  font-size: 1.25rem; /* Adjust font size as needed */
  text-transform: uppercase;
  position: center;
  background-color: #02080c;
}
.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-animation 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: none;
}

/* Define a few different ripple colors with gradient backgrounds */
.ripple-1 { 
    background: radial-gradient(circle at 40% 40%, #6366f1 30%, #ff0984 60%, #f59e42 80%, #10b981 100%);
}
.ripple-2 { 
    background: radial-gradient(circle at 60% 60%, #ef4444 25%, #ff8503 55%, #34d399 80%, #3b82f6 100%);
}
.ripple-3 { 
    background: radial-gradient(circle at 50% 50%, #22c55e 20%, #00ffaa 50%, #6366f1 80%, #f59e42 100%);
}
.ripple-4 { 
    background: radial-gradient(circle at 60% 40%, #3b82f6 20%, #ff0000 50%, #f59e42 80%, #10b981 100%);
}

@keyframes ripple-animation {
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        transform: scale(4); /* Made the ripple expand further */
        opacity: 0;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}
#openStocksalesAppBtn {
  position: relative; /* Essential for positioning the ripple */
  overflow: hidden; /* Hides the ripple until it's triggered */
}

#openStocksalesAppBtn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.3s, opacity 0.3s;
}

#openStocksalesAppBtn:active::after {
  transform: translate(-50%, -50%) scale(20);
  opacity: 1;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
}

        .language-selector {
            position: fixed;
            top: 20px;
            right: 80px;
            z-index: 1000;
            display: flex;
            align-items: center;
            background-color: rgba(176, 221, 93, 0.9);
            border-radius: 20px;
            padding: 5px 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .language-selector select {
            background: transparent;
            border: none;
            font-size: 14px;
            font-weight: 500;
            color: #333;
            cursor: pointer;
            padding: 2px 5px;
            outline: none;
        }
        .language-selector .globe-icon {
            margin-right: 5px;
            color: #2563eb;
        }
        .dropdown {
            position: relative;
            display: inline-block;
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            bottom: 100%; /* Position above the button */
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--bg-secondary);
            min-width: 120px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
        
        .dropdown-content button {
            color: var(--text-primary);
            padding: 8px 16px;
            text-decoration: none;
            display: block;
            width: 100%;
            text-align: center;
            border: none;
            background-color: transparent;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .dropdown-content button:hover {
            background-color: #333;
        }

    @media print {
  .text-blue-700 {
    color: #000 !important;
  }
}
        .social-media-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }
        
        .social-media-links a {
            color: rgb(255, 255, 255);
            background-color: var(--secondary);
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 24px;
            transition: transform 0.3s, background-color 0.3s;
        }
        
        .social-media-links a:hover {
            transform: scale(1.1);
        }
.social-media-container {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin: 20px 0;
}

.social-title {
    color: #333;
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 600;
}

.social-media-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.social-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    padding: 15px 20px;
    border-radius: 12px;
    background: white;
    transition: all 0.3s ease;
    min-width: 100px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.social-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.social-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.social-svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.social-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    transition: color 0.3s ease;
}

/* Facebook */
.facebook-btn:hover {
    background: #1877F2;
}

.facebook-btn:hover .social-label {
    color: white;
}

.facebook-btn .social-icon-wrapper {
    background: #1877F2;
}

/* TikTok */
.tiktok-btn:hover {
    background: #000000;
}

.tiktok-btn:hover .social-label {
    color: white;
}

.tiktok-btn .social-icon-wrapper {
    background: #000000;
}

/* Instagram */
.instagram-btn:hover {
    background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
}

.instagram-btn:hover .social-label {
    color: white;
}

.instagram-btn .social-icon-wrapper {
    background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
}

/* Animation */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.social-btn:hover .social-icon-wrapper {
    animation: float 1s infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .social-media-links {
        gap: 15px;
    }
    
    .social-btn {
        padding: 12px 15px;
        min-width: 85px;
    }
    
    .social-icon-wrapper {
        width: 40px;
        height: 40px;
    }
    
    .social-svg {
        width: 20px;
        height: 20px;
    }
    
    .social-label {
        font-size: 12px;
    }
}
        #social-media-links {
    background: linear-gradient(90deg, #2563eb 0%, #1e293b 100%);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
    .future-lit-card {
  box-shadow: 0 8px 32px 0 rgba(56,189,248,0.25), 0 1.5px 8px 0 rgba(99,102,241,0.18);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, #1e293b 60%, #2563eb 100%);
  position: relative;
  overflow: hidden;
}
.future-lit-card ul li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.2rem;
  color: #fff;
  background: rgba(30,41,59,0.7);
  border-radius: 0.75rem;
  padding: 0.75rem 1.2rem;
  box-shadow: 0 2px 8px 0 rgba(56,189,248,0.08);
  transition: background 0.2s;
}
.future-lit-card ul li .rank {
  font-size: 1.5rem;
  font-weight: bold;
  color: #38bdf8;
  text-shadow: 0 0 8px #38bdf8;
  margin-right: 0.5rem;
}
.future-lit-card ul li .cat-name {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #a5b4fc;
}
.future-lit-card ul li .cat-amount {
  margin-left: auto;
  font-weight: bold;
  color: #facc15;
  text-shadow: 0 0 6px #facc15;
}
@keyframes spin-slow {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
.animate-spin-slow {
  animation: spin-slow 3s linear infinite;
}


.card-hover-purple-glow:hover {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.card-hover-orange-glow:hover {
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.5);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}
#prevWeekBtn, #nextWeekBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  background-color: #e5e7eb;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  color: #374151;
  transition: 0.2s;
}
#prevWeekBtn:hover, #nextWeekBtn:hover {
  background-color: #d1d5db;
}
#prevWeekBtn { left: 0; }
#nextWeekBtn { right: 0; }

.loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.loading-indicator.night-mode {
    background: rgba(0, 0, 0, 0.95);
    color: white;
}

.loading-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.loading-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3b82f6;
    animation: loading-bounce 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes loading-bounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.loading-indicator.hidden {
    opacity: 0;
    pointer-events: none;
}

/* --- ENVELOPE BASE STYLES & ELEGANT ENTRANCE (LANDSCAPE SUPPORT) --- */
.envelope {
    width: 450px;
    height: 250px;
    position: fixed;
    perspective: 1000px;
    
    
    /* Initial State: Off-screen at the bottom */
    bottom: -350px; 
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;

    transition: bottom 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.7s; 
    z-index: 9000000000000000000000000;
}

/* Active State: Slides up to center screen */
.envelope.active {
    bottom: 50%; 
    transform: translate(-50%, 50%); 
    opacity: 1;
}

/* Reverse State: Slides back down */
.envelope.fall {
    bottom: -350px;
    opacity: 0;
}

/* --- ENVELOPE BODY & FLAP --- */
.envelope-body {
    background-color: #ffffff; 
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    border: 1px solid rgba(0,0,0,0.1);
}

.envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 125px;
    z-index: 3;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%); /* Gradient for flap */
    transform-origin: top;
    transition: transform 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045);
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Open Flap State */
.envelope.open .envelope-flap {
    transform: rotateX(180deg);
}

/* --- LANDSCAPE REWARD CARD (ZOOM ANIMATION) --- */
.reward-paper {
    position: absolute;
    top: 50%; 
    left: 50%;
    width: 90%; 
    height:  757.562px;
    background: #ffffff;
    z-index: 2; 
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    
    /* START STATE: Small, centered inside envelope */
    transform: translate(-50%, -50%) scale(0.1); 
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.4s;
    
    /* Card Layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

/* ZOOM OUT STATE (Final Display Size) */
.envelope.zoom-out .reward-paper {
    position: fixed;
    top: 50%;
    left: 50%;
    
    width: 90vmin; 
    height: calc(90vmin / 1.6);
    
    max-width: 900px;
    max-height: 562.5px;

    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    z-index: 10;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* ZOOM IN STATE (Dismissal) - Reverses to start state */
.envelope.zoom-in .reward-paper {
    transform: translate(-50%, -50%) scale(0.1); 
    position: absolute; 
    width: 90%;
    height: 80%;
    opacity: 0;
}
/* Certificate container + watermark styles */
#certificateContainer {
    background-color: whitesmoke; 
}


.certificate-inner {
    padding: 40px;
    border: 8px double #d4af37; /* Double border for elegance */
    display: flex;
    width: 1200px;
    height: 757.562px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    
}

/* Decorative Corners (more elegant) */
.certificate-inner::before, .certificate-inner::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border: 10px solid #d4af37;
    border-radius: 0;
}
.certificate-inner::before {
    top: -4px; left: -4px;
    border-bottom: none;
    border-right: none;
}
.certificate-inner::after {
    bottom: -4px; right: -4px;
    border-top: none;
    border-left: none;
}

/* Add additional decorative corners */
.certificate-inner .corner-top-right,
.certificate-inner .corner-bottom-left {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 10px solid #d4af37;
}
.certificate-inner .corner-top-right {
    top: -4px; right: -4px;
    border-bottom: none;
    border-left: none;
}
.certificate-inner .corner-bottom-left {
    bottom: -4px; left: -4px;
    border-top: none;
    border-right: none;
}

/* Certificate heading with improved styling */
.certificate-heading {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #1f2937;
  margin-bottom: 0 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    position: relative;
}

.certificate-heading::after {
    content: '';
    display: block;
    width: 120px;
    height: 3px;
    background: linear-gradient(to right, transparent, #d4af37, transparent);
    margin: 15px auto;
}

.certificate-subheading {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #4b5563;
    margin-bottom: 2rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.certificate-recipient {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #1f2937;
    margin: 2rem 0;
    font-weight: 700;
    font-style: italic;
    padding: 0.5rem 2rem;
    border-top: 2px solid #d4af37;
    border-bottom: 2px solid #d4af37;
    position: relative;
}

.certificate-message {
    font-size: 1.1rem;
    color: #4b5563;
    max-width: 600px;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.certificate-signatures {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 500px;
    margin-top: 2rem;
}

.signature-line {
    width: 150px;
    height: 1px;
    background-color: #9ca3af;
    margin: 0.5rem 0;
}

/* --- CONFETTI ANIMATION STYLES --- */
.confetti-container {
    position: fixed;
    top: 50%;
    left: 50%;
    pointer-events: none;
    z-index: 11;
    width: 0;
    height: 0;
    transform: translate(-50%, 50%); 
}

/* Confetti piece styling with more variety */
.confetti-piece {
    position: absolute;
    opacity: 0;
    transition: none; 
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
}

.confetti-piece.circle { border-radius: 50%; }
.confetti-piece.triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.confetti-piece.star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

@keyframes burst-out {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    5% { opacity: 1; } 
    100% { 
        transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 720deg)); 
        opacity: 0; 
    }
}

.confetti-container.burst .confetti-piece {
    opacity: 1;
    animation: burst-out 4s forwards;
}


/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 768px) {
    .envelope {
        width: 350px;
        height: 200px;
    }
    
    .certificate-heading {
        font-size: 2.5rem;
    }
    
    .certificate-recipient {
        font-size: 1.8rem;
    }
    
    .certificate-subheading {
        font-size: 1.2rem;
    }
    
    .reward-button {
        padding: 14px 30px;
        font-size: 1rem;
    }
    
    #downloadBtn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

.customReceiptModal {
  width: 70%; /* or 1056px */
  height: 70%; /* or 537px */
}
.star-rating {
    display: flex;
    gap: 2px;
}

.star {
    color: #6b7280; /* gray-500 - empty star color */
    font-size: 16px;
    line-height: 1;
}

.star.filled.gold { color: #ffea05; }      /* amber-400 */
.star.filled.silver { color: #055cf3; }    /* gray-400 */
.star.filled.bronze { color: #b45309; }    /* amber-700 */
#printWatermark {
    position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    opacity: 0.15;
    pointer-events: none;
    z-index: -1;
}

/* Make watermark visible only in print */
@media print {
    #printWatermark {
        display: block !important;
    }
}
@media screen {
    #printWatermark {
        display: none;
    }
}

div#receiptsListSection {
  max-height: 600px;
  overflow-y: auto;
}
div#boo{
  max-height: 800px;
   width: 1300px;
   max-width: none;
  overflow-y: auto;
}

/* More Info Modal Styles */
#moreInfoModal {
  animation: fadeIn 0.3s ease-out;
}

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

/* Chart container */
#salesChart {
  width: 100% !important;
  height: 100% !important;
}
div#recordNewSaleSection {
  max-width: 800px; /* Adjust this value as needed to reduce the width */
  margin-left: auto;
  margin-right: auto;
      border: 2px solid white;
    border-radius: 1rem;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.05);
}
div#addItemSection {
  max-width: 800px; /* Adjust this value as needed to reduce the width */
  margin-left: auto;
  margin-right: auto;
}
div#salesAssociatessection {
  max-width: 800px; /* Adjust this value as needed to reduce the width */
  margin-left: auto;
  margin-right: auto;
}
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
#modalContent {
    max-height: calc(-40px + 100vh);
    overflow-y: auto;
    box-sizing: border-box;
}
.action-type-btn {
    transition: all 0.2s ease;
}

.action-type-btn:hover {
    transform: translateY(-1px);
}

/* Color coding for action types */
[data-action="restock"] { border-color: #10b981; }
[data-action="ship"] { border-color: #3b82f6; }
[data-action="give"] { border-color: #8b5cf6; }
[data-action="reduce"] { border-color: #f59e0b; }
[data-action="damage"] { border-color: #ef4444; }
[data-action="return"] { border-color: #6b7280; }

[data-action="restock"]:hover { background-color: #10b98111; }
[data-action="ship"]:hover { background-color: #3b82f611; }
[data-action="give"]:hover { background-color: #8b5cf611; }
[data-action="reduce"]:hover { background-color: #f59e0b11; }
[data-action="damage"]:hover { background-color: #ef444411; }
[data-action="return"]:hover { background-color: #6b728011; }



.notification-item {
    transition: all 0.2s ease;
}

.notification-item:hover {
    background-color: #f9fafb;
    transform: translateX(-2px);
    color: blue;
}

#notifDropdown {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
    max-height: 500px;
    overflow-y: auto;
}

#notifList {
    scrollbar-width: thin;
    scrollbar-color: #9ca3af #f3f4f6;
}

#notifList::-webkit-scrollbar {
    width: 6px;
}

#notifList::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 3px;
}

#notifList::-webkit-scrollbar-thumb {
    background-color: #9ca3af;
    border-radius: 3px;
}




@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.zoommodal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6); /* translucent */
    backdrop-filter: blur(12px);
    z-index: 20000000000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image Zoom Modal Styles */
#imageZoomModal {
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#imageZoomModal.active {
    opacity: 1;
    cursor: default;
}

#imageZoomModal.active img {
    cursor: grab;
}

#imageZoomModal.active img:active {
    cursor: grabbing;
}

.zoom-control-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.zoom-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.zoom-control-btn:active {
    transform: scale(0.95);
}

/* Prevent image dragging */
#zoomedImage {
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* Loading animation */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Mobile optimization */
@media (max-width: 640px) {
    #imageZoomModal .zoom-control-btn {
        width: 36px;
        height: 36px;
    }
    
    #zoomedImageTitle {
        font-size: 16px;
        bottom: 8px;
    }
    
    #zoomLevelIndicator {
        bottom: 8px;
        right: 8px;
    }
}
/* User photo hover effects */
.user-photo-zoom {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-photo-zoom:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-color: #3b82f6 !important;
}

/* Zoom overlay */
.user-photo-overlay {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-photo-container:hover .user-photo-overlay {
    opacity: 1;
}

/* Pulse animation for attention */
@keyframes photo-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.user-photo-pulse {
    animation: photo-pulse 2s infinite;
}

.user-photo-pulse:hover {
    animation: none;
}
/* Screen styles for profit/loss cards */
.summary-card {
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* ===== Overlay ===== */
#loadingOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    z-index: 9999999999999999999999999999999999999999999999999999999999999999999999999999999;
}
button:hover svg {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}
/* ===== LOADING CARD ===== */
.loading-card {
    background: #ffffff;
    width: 320px;
    padding: 28px 24px;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    animation: scaleIn 0.25s ease-out;
}

@keyframes scaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ===== SPINNER ===== */
.spinner {
    width: 58px;
    height: 58px;
    border: 6px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    margin: 0 auto 18px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== TEXT ===== */
.loading-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
}

.loading-text {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 22px;
}

/* ===== CANCEL BUTTON ===== */
#cancelLoadingBtn {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: #ef4444;
    color: #ffffff;
    transition: background 0.2s ease;
}

#cancelLoadingBtn:hover {
    background: #dc2626;
}

#cancelLoadingBtn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}



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

/* Progress bar animation */
#qrProgressBar {
    transition: width 0.3s ease;
}

/* Hover effects for radio buttons */
input[type="radio"]:checked + div {
    border-color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.05);
}

/* Loading spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}


/* Custom Animations */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.animate-shimmer {
    animation: shimmer 2s infinite;
}

/* Modal Animations */
@keyframes modalEnter {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-content {
    animation: modalEnter 0.3s ease-out forwards;
}

/* Progress Bar Animation */
#qrProgressBar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-btn {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.admin-btn:active {
    transform: scale(0.98);
}

.admin-btn-primary {
    background-color: #4f46e5;
    color: #ffffff;
}

.admin-btn-primary:hover {
    background-color: #4338ca;
    box-shadow: 0 6px 14px rgba(79,70,229,0.35);
}

.admin-btn-success {
    background-color: #16a34a;
    color: #ffffff;
}

.admin-btn-success:hover {
    background-color: #15803d;
    box-shadow: 0 6px 14px rgba(22,163,74,0.35);
}
.liquid-loader {
    position: fixed;
    inset: 0;
    background: #02080c;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important;
}

.liquid-text {
    position: relative;
    font-size: 120px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.05); /* The "Empty" part of the glass */
    text-transform: uppercase;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
}

.liquid-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* The Liquid Color - Deep Blue to Cyan */
    color: #00d2ff;
    -webkit-text-fill-color: #00d2ff;
    
    /* The Magic: This clips the text and applies the "Wobble" filter */
    filter: url(#liquid-filter);
    clip-path: inset(100% 0 0 0);
    animation: moveLiquid 6s ease-in-out infinite;
    
    /* Internal Glow */
    text-shadow: 
        0 0 15px rgba(0, 210, 255, 0.6),
        0 0 30px rgba(0, 210, 255, 0.3);
}

/* Second layer for surface highlights (makes it look 3D) */
.liquid-text::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: -2px; /* Offset slightly to create a "rim" of light */
    width: 100%;
    height: 100%;
    color: #fff;
    -webkit-text-fill-color: #fff;
    filter: url(#liquid-filter) blur(1px);
    clip-path: inset(100% 0 0 0);
    animation: moveLiquid 6s ease-in-out infinite;
    opacity: 0.4;
    z-index: 2;
}

@keyframes moveLiquid {
    0% {
        clip-path: inset(100% 0 0 0);
    }
    45% {
        clip-path: inset(20% 0 0 0);
    }
    55% {
        clip-path: inset(20% 0 0 0);
    }
    100% {
        clip-path: inset(0% 0 0 0);
    }
}

.toggle-btn {
    width: 78px;
    height: 40px;
    background: linear-gradient(135deg, #0c4fea, #1c1f26);
    border-radius: 999px;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    box-shadow:
        inset 0 0 6px rgba(0,0,0,0.6),
        0 0 10px rgba(0, 140, 255, 0.25);
    transition: background 0.3s ease;
}

/* sliding circle */
.toggle-knob {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #ff8a65, #ff5252);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    box-shadow:
        0 0 8px rgba(255, 82, 82, 0.8);
    transform: translateX(0);
    transition: transform 0.35s ease, background 0.3s ease;
}

/* ON state */
.toggle-btn.active {
    background: linear-gradient(135deg, #0f172a, #020617);
}

.toggle-btn.active .toggle-knob {
    transform: translateX(38px);
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    box-shadow:
        0 0 10px rgba(0, 242, 254, 0.9);
}
.toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    gap: 16px;
    justify-content: center;
    align-items: center;
}




.toggle-knob {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    font-size: 15px;
    transform: translateX(0);
    transition: transform 0.35s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* WIFI ON */
.toggle-btn.active {
    background: linear-gradient(135deg, #020617, #0f172a);
}

.toggle-btn.active .toggle-knob {
    transform: translateX(38px);
    background: linear-gradient(135deg, #22d3ee, #0ea5e9);
    color: #ffffff;
    box-shadow:
        0 0 10px rgba(14, 165, 233, 0.9),
        0 0 18px rgba(34, 211, 238, 0.6);
}
.share-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #22d3ee);
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(99,102,241,.8);
    transition: transform .25s ease, box-shadow .25s ease;
}

.share-btn:hover {
    transform: scale(1.08);
}

.share-btn:active {
    transform: scale(0.92);
}

/* ACTIVE (modal open) */
.share-btn.active {
    box-shadow:
        0 0 12px rgba(34,211,238,.9),
        0 0 28px rgba(99,102,241,.8);
}
.share-modal {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.75);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.share-modal.show {
  opacity: 1;
  pointer-events: auto;
}

/* CARD */
.share-card {
  width: 340px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(15,23,42,.85), rgba(2,6,23,.85));
  backdrop-filter: blur(16px);
  color: #e5e7eb;
  text-align: center;
  position: relative;
  transform: translateY(30px) scale(0.94);
  opacity: 0;
  transition: all 0.4s ease;
  box-shadow:
    0 0 0 1px rgba(56,189,248,.25),
    0 25px 60px rgba(14,165,233,.25);
}

.share-modal.show .share-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* GLOW BORDER */
.share-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(120deg, #22d3ee, #6366f1, #22d3ee);
  filter: blur(12px);
  opacity: .35;
  z-index: -1;
}

/* HEADER */
.share-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.share-header p {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 16px;
}

/* IMAGE */
.image-preview {
  width: 100%;
  height: 140px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.image-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* LINK */
.share-link {
  font-size: 12px;
  word-break: break-all;
  color: #38bdf8;
  margin-bottom: 12px;
}

/* QR */
.qr-box {
  background: white;
  padding: 10px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 16px;
}

/* RATING */
.rating-box p {
  font-size: 13px;
  margin-bottom: 6px;
  color: #cbd5f5;
}

.stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 26px;
  cursor: pointer;
}

.stars span {
  color: #334155;
  transition: color 0.2s, transform 0.2s;
}

.stars span.active {
  color: #facc15;
  transform: scale(1.15);
}

#ratingText {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #94a3b8;
}

/* BUTTON */
.share-actions button {
  margin-top: 16px;
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}

.share-actions button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(99,102,241,.45);
}

/* HELP BUTTON */
.help-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    font-size: 18px;
    box-shadow: 0 0 14px rgba(34,197,94,.8);
    transition: transform .25s ease, box-shadow .25s ease;
}

.help-btn:hover {
    transform: scale(1.08);
}

.help-btn.active {
    box-shadow: 0 0 25px rgba(34,197,94,1);
}
/* HELP MODAL */
.help-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 15px;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .3s ease;
    backdrop-filter: blur(5px);
}

.help-modal.hidden {
    opacity: 0;
    pointer-events: none;
}


/* MODAL CONTAINER */
.help-modal > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 650px;

    max-height: 95vh;
}


/* CARD */
.help-card {
    width: 100%;
    border-radius: 22px;
    padding: clamp(18px, 4vw, 35px);

    overflow-y: auto;
    max-height: 80vh;

    box-shadow:
        0 25px 60px rgba(0,0,0,.35);

    font-weight: 600;
}


/* TITLE */
.help-card h2 {
    font-size: clamp(22px, 5vw, 32px);
    font-weight: 900;
    letter-spacing: .5px;
    margin-bottom: 10px;
}


/* DESCRIPTION */
.help-card p {
    font-size: clamp(13px, 2vw, 16px);
    font-weight: 600;
    line-height: 1.6;
}


/* SECURITY BOXES */
.help-card h4 {
    font-weight: 900 !important;
    font-size: clamp(13px,2vw,16px);
}


.help-card strong {
    font-weight: 900;
}


/* EMAIL */
.email-link {
    font-size: 14px;
    font-weight: 900;
    display:flex;
    align-items:center;
    gap:8px;
}


/* CLOSE BUTTON */
.closebutton {

    width:100%;
    max-width:250px;

    margin-top:15px;

    padding:14px 25px;

    border-radius:15px;

    background:#111827;
    color:white;

    font-size:16px;
    font-weight:900;

    cursor:pointer;

    transition:.2s;
}


.closebutton:hover {
    transform:scale(1.05);
}


/* MOBILE */
@media(max-width:600px){

    .help-modal {
        padding:10px;
    }


    .help-card {

        border-radius:18px;

        max-height:82vh;

        padding:18px;

    }


    .help-card p {

        font-size:13px;

    }


    .closebutton {

        font-size:15px;

        padding:12px;

    }

}


/* SMALL PHONES */
@media(max-width:380px){

    .help-card {

        padding:14px;

    }


    .help-card h2 {

        font-size:20px;

    }


    .help-card p {

        font-size:12px;

    }

}
/* CARD */
.help-card {
    background: linear-gradient(145deg, #020617, #0f172a);
    color: white;
    padding: 24px;
    width: 100%;
    max-width: 560px;
    border-radius: 18px;
    text-align: left;
    transform: translateY(0) scale(1);
    opacity: 1;
    transition: all .4s ease;
    box-shadow: 0 0 30px rgba(34,197,94,.35);
    overflow-y: auto;
    max-height: calc(90vh - 64px);
}

.closebutton {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 999px;
    cursor: pointer;
    margin-top: 4px;
}


/* EMAIL */
.email-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 20px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #1e293b;
    color: #22c55e;
    text-decoration: none;
    font-weight: 600;
    transition: background .2s ease, transform .2s ease;
}

.email-link:hover {
    background: #334155;
    transform: scale(1.05);
}

.closebutton {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    color: white;
    padding: 8px 20px;
    border-radius: 999px;
    cursor: pointer;
}
.qr-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#qrCode {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
button {
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important; /* Forces white border */
    transition: all 0.2s ease-in-out; /* Smooth hover effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Hover State */
button:hover {
    border-color: #ffffff !important; /* Pure white on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Lift effect */
    transform: translateY(-1px); /* Slight lift */
}

/* Active/Click State */
button:active {
    border-color: 2.5px solid #fecd08 !important;
    transform: translateY(0px); /* Press down effect */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.tour-target-active {
    border: 2.5px solid #fecd08 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.6) !important;
    z-index: 10000 !important;
    position: relative !important;
    background-color: white !important;
    color: #1d4ed8 !important;
    transform: scale(1.05);
    transition: all 0.3s ease;
    overflow: visible !important;
}

/* Glowing dot that runs around the border */
.tour-target-active::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    width: 16px;
    height: 16px;
    background: #fecd08;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: run-around 3s linear infinite;
    z-index: 10001;
    box-shadow: 0 0 10px #fecd08, 0 0 20px #fecd08;
}

@keyframes run-around {
    0% {
        top: -8px;
        left: 0;
    }
    25% {
        top: -8px;
        left: 100%;
    }
    50% {
        top: calc(100% + 8px);
        left: 100%;
    }
    75% {
        top: calc(100% + 8px);
        left: 0;
    }
    100% {
        top: -8px;
        left: 0;
    }
}

/* For rectangular elements */
.tour-target-active::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: inherit;
    border: 2px solid transparent;
    background: 
        linear-gradient(90deg, 
            #fecd08 0%, 
            #2563eb 33%, 
            #60a5fa 66%, 
            #fecd08 100%) border-box;
    background-size: 300% 300%;
    animation: border-run 2s linear infinite;
    z-index: -1;
    mask: 
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
}

@keyframes border-run {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 300% 0%;
    }
}







/* Customer Transactions Modal Styles */
#customerTransactionsModal .modal-content {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Customer card hover effect */
.customer-card {
    transition: all 0.2s ease;
}

.customer-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Type badges */
.type-badge-sale {
    background-color: #d1fae5;
    color: #065f46;
}

.type-badge-credit {
    background-color: #fef3c7;
    color: #92400e;
}

.type-badge-receipt {
    background-color: #dbeafe;
    color: #1e40af;
}

/* Status badges */
.status-badge-completed {
    background-color: #d1fae5;
    color: #065f46;
}

.status-badge-pending {
    background-color: #fef3c7;
    color: #92400e;
}

.status-badge-paid {
    background-color: #d1fae5;
    color: #065f46;
}
#customerTransactionsTable {
  flex-grow: 1; /* Allows it to take available space */
  overflow-y: auto;
    max-height: 300px; /* Adjust this value as needed */
  overflow-y: auto; /* Ensure scrolling if content exceeds max-height */
}
#customerSearchResults {
  max-height: 400px; /* Adjust this value as needed */
  overflow-y: auto; /* Ensure scrolling if content exceeds max-height */
}


input[type="checkbox"] {
    /* Hide default checkbox */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Custom checkbox styling */
    width: 24px;
    height: 24px;
    border: 3px solid greenyellow;
    border-radius: 6px;
   
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    vertical-align: middle;
}

/* Checked state */
input[type="checkbox"]:checked {
    background-color: #4f46e5; /* Blue background */
    border-color:9px solid blue;
       content: "✔";
       color: #4f46e5; /* Blue tick */
}

/* White bold tick */
input[type="checkbox"]:checked::after {
    content: "✔";
    color: #4f46e5; /* Blue tick */
    font-size: 16px;
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
}

/* Click / active effect */
input[type="checkbox"]:active {
    transform: scale(0.9);
}

        
  .backup-container {
            padding: 20px;
            background: #f5f7fa;
            min-height: 100vh;
            z-index: 100000000;
        }
        
        .backup-card {
            background: white;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .backup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .backup-title {
            font-size: 24px;
            font-weight: 600;
            color: #333;
        }
        
        .backup-status {
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 14px;
        }
        
        .status-enabled {
            background: #d4edda;
            color: #155724;
        }
        
        .status-disabled {
            background: #f8d7da;
            color: #721c24;
        }
        
        .setting-row {
            margin: 15px 0;
            display: flex;
            align-items: center;
        }
        
        .setting-label {
            width: 200px;
            font-weight: 500;
            color: #555;
        }
        
        .setting-control {
            flex: 1;
        }
        
        select, input[type="number"] {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 200px;
        }
        
        .backup-actions {
            display: flex;
            gap: 10px;
            margin-top: 25px;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: #007bff;
            color: white;
        }
        
        .btn-primary:hover {
            background: #0056b3;
        }
        
        .btn-success {
            background: #28a745;
            color: white;
        }
        
        .btn-success:hover {
            background: #218838;
        }
        
        .btn-warning {
            background: #ffc107;
            color: #212529;
        }
        
        .btn-warning:hover {
            background: #e0a800;
        }
        
        .backup-history {
            max-height: 300px;
            overflow-y: auto;
        }
        
        .backup-item {
            padding: 12px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .backup-info {
            flex: 1;
        }
        
        .backup-name {
            font-weight: 500;
            margin-bottom: 4px;
        }
        
        .backup-meta {
            font-size: 12px;
            color: #666;
        }
        
        .status-badge {
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .status-success {
            background: #d4edda;
            color: #155724;
        }
        
        .status-failed {
            background: #f8d7da;
            color: #721c24;
        }
        
        .drive-list {
            background: #f8f9fa;
            border-radius: 5px;
            padding: 15px;
            margin: 15px 0;
        }
        
        .drive-item {
            padding: 8px;
            border-bottom: 1px solid #dee2e6;
        }
        
        .restore-btn {
            background: #17a2b8;
            color: white;
            padding: 5px 10px;
            border-radius: 3px;
            border: none;
            cursor: pointer;
            font-size: 12px;
        }
        
        .alert {
            padding: 12px;
            border-radius: 5px;
            margin: 10px 0;
        }
        
        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .alert-danger {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .alert-info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }

        .qr-overlay {
    position: fixed;
    inset: 0;
   
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 999999;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Show State */
.qr-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

/* Modal */
.qr-modal {
    width: 100%;
    max-width: 500px;
   background-color: #23232a !important;
    color: #e5e7eb !important; 
    border-radius: 22px 22px 0 0;
    padding: 25px 20px 35px;
    position: relative;
    box-shadow: 0 -15px 40px rgba(0,0,0,0.25);

    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Slide Up Animation */
.qr-overlay:not(.hidden) .qr-modal {
    transform: translateY(0);
}

/* Drag Handle (Modern Look) */
.qr-handle {
    width: 45px;
    height: 5px;
    background: #d1d5db;
    border-radius: 50px;
    margin: 0 auto 20px;
}

/* Close Button */
.qr-close-btn {
    position: absolute;
    right: 18px;
    top: 15px;
    font-size: 24px;
    font-weight: bold;
    border: none;
    background: none;
    cursor: pointer;
    color: #555;
    transition: 0.2s ease;
}

.qr-close-btn:hover {
    color: #111;
}

/* Title */
.qr-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: white;
}
/* Center wrapper */
.qr-video-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Scanner Frame */
.scanner-frame {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1; /* Perfect square */
    border-radius: 20px;
    overflow: hidden;
}

/* Video inside frame */
#qrVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

/* Glowing Animated Border */
.scanner-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 3px;
    background: linear-gradient(
        45deg,
        #2563eb,
        #60a5fa,
        #3b82f6,
        #2563eb
    );
    background-size: 300% 300%;
    animation: borderGlow 4s linear infinite;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}

/* Border Animation */
@keyframes borderGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Scan Line */
.scan-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;

    background: linear-gradient(
        to right,
        transparent,
        rgba(37, 99, 235, 0.9),
        transparent
    );

    box-shadow: 0 0 15px rgba(37, 99, 235, 0.8);

    animation: scanMove 2.2s ease-in-out infinite;
}

/* Scan animation */
@keyframes scanMove {
    0% {
        top: 5%;
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
    100% {
        top: 90%;
        opacity: 0.3;
    }
}
.qr-controls {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.qr-control-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: background 0.3s;
}

.qr-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ===============================
   OVERLAY
=================================*/
.moreinfo-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.75);
    backdrop-filter: blur(10px);
    z-index: 99999999999999;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.moreinfo-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

/* ===============================
   DESKTOP / TABLET
=================================*/
.moreinfo-container {
    width: 92%;
    max-height: 92vh;
    overflow: hidden;
    border-radius: 20px;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.35s cubic-bezier(.22,1,.36,1);
    display: flex;
    flex-direction: column;
}

.moreinfo-overlay:not(.hidden) .moreinfo-container {
    transform: scale(1) translateY(0);
}

/* Scroll only content, not whole modal */
.moreinfo-container > div:nth-child(2) {
    overflow-y: auto;
    flex: 1;
}

/* ===============================
   MOBILE BOTTOM SLIDE MODE
=================================*/
@media (max-width: 768px) {

    .moreinfo-overlay {
        align-items: flex-end;
    }

    .moreinfo-container {
        width: 100%;
        max-height: 92vh;
        border-radius: 24px 24px 0 0;

        transform: translateY(100%);
    }

    .moreinfo-overlay:not(.hidden) .moreinfo-container {
        transform: translateY(0);
    }
}

/* ===============================
   ANDROID SAFE AREA FIX
=================================*/
@supports(padding: max(0px)) {
    .moreinfo-container {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
}

/* ===============================
   OVERLAY
=================================*/
.analytics-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh; /* 🔥 important fix */
    background: rgba(17,24,39,.75);
    backdrop-filter: blur(10px);
    z-index: 9999;

    display: block; /* ❌ remove flex */
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.analytics-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}
.analytics-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

/* ===============================
   CONTAINER
=================================*/
.analytics-container {
    width: 94%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    transform: scale(.94) translateY(30px);
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}

.analytics-overlay:not(.hidden) .analytics-container {
    transform: scale(1) translateY(0);
}

/* HEADER & FOOTER */
.analytics-header,
.analytics-footer {
    flex-shrink: 0;
}

/* BODY SCROLL ONLY */
.analytics-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* ===============================
   COMPONENT STYLES
=================================*/

.summary-card {
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}
.summary-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
}



.section-box {
    background: #fff;
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.year-btn {
    padding: 4px 10px;
    border-radius: 8px;
    background: #f3f4f6;
}
.year-display {
    padding: 4px 14px;
    border-radius: 8px;
    background: #e5e7eb;
    font-weight: 600;
}

.close-btn {
    font-size: 20px;
    padding: 6px 10px;
    border-radius: 50%;
}

.primary-btn {
    background: #2563eb;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
}

.secondary-btn {
    background: #111827;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
}

/* ===============================
   MOBILE BOTTOM SHEET
=================================*/
@media (max-width:768px){

    .analytics-overlay {
        align-items: flex-end;
    }

    .analytics-container {
        width: 100%;
        border-radius: 24px 24px 0 0;
        transform: translateY(100%);
    }

    .analytics-overlay:not(.hidden) .analytics-container {
        transform: translateY(0);
    }

    .analytics-body {
        padding: 1rem;
    }
}

/* SAFE AREA */
@supports(padding: max(0px)) {
    .analytics-container {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

.backup-badge {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 8px;
    background-color: gray; /* default */
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

.backup-now-btn {
    background: linear-gradient(to right, #10b981, #059669);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.backup-now-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.backup-now-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.backup-now-btn svg { width: 18px; height: 18px; }
.row-click-animation {
  animation: row-pulse 0.2s ease;
}

@keyframes row-pulse {
  0% {
    background-color:green; /* light blue */
  }
  100% {
    background-color: transparent;
  }
}
.schedule-option.active {
    border-color: #3b82f6;
    background-color: #00ff40;
    font-weight: 500;
}

 .loading-glass {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(30px);
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  }

  .glass-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .pulse-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    animation: pulse-scale 2s ease-in-out infinite;
  }

  .pulse-delay-1 {
    animation-delay: 0.2s;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  }

  .pulse-delay-2 {
    animation-delay: 0.4s;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }

  @keyframes pulse-scale {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.3);
      opacity: 0.5;
    }
  }

  .glass-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 3px;
    text-transform: uppercase;
    animation: fade-in-out 2s ease-in-out infinite;
  }

  @keyframes fade-in-out {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
  }
.MODAL-LOCK-OPEN {
   
    visibility: visible !important;

}

.image-context-menu {
    position: absolute;
    background: blue;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
    z-index: 9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
    min-width: 150px;
    padding: 8px 0;
    font-family: sans-serif;
}

.image-context-menu button {
    width: 100%;
    padding: 8px 16px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.image-context-menu button:hover {
    background: #f0f7ff;
    color: #2563eb;
}

.image-context-menu .menu-divider {
    height: 1px;
    background: #eee;
    margin: 4px 0;
}
div#notesEditor {
  height: auto; /* Allow height to adjust to content, up to max-height */
  max-height: 800px; /* Example maximum height */
  width: auto; /* Allow width to adjust to content, up to max-width */
  max-width: 900px;  /* Example maximum width */
  overflow: auto; /* Adds scrollbars if content overflows */
      padding-top: 10px;
    margin-top: 40px;
}.update-banner {
    /* Layout */
    display: flex; 
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 42rem;
    padding: 1rem;
    justify-content: space-between;
    align-items: center;
    
    /* Visuals */
    z-index: 9999999 !important;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(12px);
    overflow: hidden;
    
    /* CLICK FIXES */
    pointer-events: auto !important; /* Allow clicks on the banner */
    isolation: isolate; /* Creates a clean layer for buttons to sit on */
    
    /* Animation */
    animation: glow-pulse 4s infinite ease-in-out;
}

/* Use the hidden class to hide it properly */
.update-banner.hidden {
    display: none !important;
}

.shimmer-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transform: skewX(-20deg);
    animation: shimmer 3s infinite;
    z-index: -1; /* Keep behind text */
    pointer-events: none; /* FIX: Makes shimmer "ghost-like" so clicks pass through it */
}

/* Button fix to ensure they show the hand cursor */
#updateInstallBtn, #closeUpdateBannerBtn {
    cursor: pointer !important;
    pointer-events: auto !important;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); }
    50% { box-shadow: 0 0 40px rgba(236, 72, 153, 0.5); }
}

@keyframes rocket-bounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(10deg); }
}

.animate-bounce {
    animation: rocket-bounce 1s infinite alternate ease-in-out;
}

    .toggle-container { display: flex; align-items: center; gap: 10px; font-family: sans-serif; }
    .switch { position: relative; display: inline-block; width: 40px; height: 22px; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; 
              background-color: #ccc; transition: .4s; border-radius: 34px; }
    .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; 
                     bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
    input:checked + .slider { background-color: #2196F3; }
    input:checked + .slider:before { transform: translateX(18px); }

    .glass-modal {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 24px;
    width: 90%; max-width: 450px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.sentiment-options {
    display: flex; gap: 15px; margin: 15px 0;
}

.sentiment-btn {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0,0,0,0.1);
    font-size: 24px; padding: 10px; border-radius: 12px;
    cursor: pointer; transition: 0.3s; flex: 1;
}

.sentiment-btn:hover, .sentiment-btn.active {
    background: #007bff; /* Professional Blue */
    color: white; transform: translateY(-3px);
}

textarea {
    width: 100%; border-radius: 8px; border: 1px solid rgba(0,0,0,0.1);
    padding: 12px; margin-top: 8px; background: rgba(255,255,255,0.8);
    font-family: inherit; resize: none;
}

.btn-primary {
    background: #007bff; color: white; border: none;
    padding: 10px 20px; border-radius: 8px; cursor: pointer;
}
#adminModalContent {
  max-height: 500px; /* You can change 500px to any desired fixed pixel value */
  overflow-y: auto; /* Keep this to ensure content remains scrollable if it exceeds the max-height */
}

.nosee {
    visibility: hidden;
}
.see {
    visibility: visible !important;
    display: block !important; /* Ensures the element is not hidden by display: none */
}

.floating-btn {
  position: fixed;
  bottom: 134px;
  right: 24px;
  background: #e60012;
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 60px;
  border: none;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
}

#filterPanel {
  background-color: rgb(35, 35, 42);
}
#filterPanel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
    inset: 0;
  flex-direction: column;
  z-index: 2147483647!important;
  background-color: rgb(35, 35, 42);
  left: 0; 
  width: 100%;
}

/* For tablets and desktops (typically 768px and up) */
@media (min-width: 768px) {
  #filterPanel {
    left: auto; /* Lets the panel "stick" to the right */
    width: 400px; /* Fixed width for larger screens */
  }
}

#filterPanel > .p-4:first-child {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smoother scrolling on iOS */
}

#filterPanel > .p-4.border-t {
  flex-shrink: 0;
}
#filterPanel {
  z-index: 2147483647;
  position: fixed;
}
#filterModal {
  z-index: 2147483647;
  position: fixed;
}
/* Base Modal Styles */
#adminProfileModal {
    transition: all 0.3s ease;
}

#adminProfileModal .max-w-4xl {
    transition: all 0.3s ease;
}

/* Profile Image Responsive */
#adminDisplaySection .w-24 {
    transition: all 0.3s ease;
}

/* Admin Info Grid Responsive */
#adminDisplaySection .grid {
    transition: all 0.3s ease;
}

/* ============================================ */
/* TABLET STYLES (768px - 1024px) */
/* ============================================ */
@media (max-width: 1024px) and (min-width: 768px) {
    #adminProfileModal .max-w-4xl {
        max-width: 95vw;
        border-radius: 1.5rem;
    }
    
    #adminProfileModal .p-6 {
        padding: 1.25rem;
    }
    
    #adminDisplaySection .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    #adminDisplaySection .w-24 {
        width: 5rem;
        height: 5rem;
    }
    
    #adminDisplaySection h2 {
        font-size: 1.5rem;
    }
    
    /* Info cards */
    #adminDisplaySection .p-4 {
        padding: 0.875rem;
    }
    
    /* Buttons */
    #goToEditBtn,
    #saveAdminProfileBtn,
    #cancelEditBtn {
        padding: 0.875rem;
        font-size: 0.875rem;
    }
}

/* ============================================ */
/* SMALL TABLET & LARGE MOBILE (480px - 768px) */
/* ============================================ */
@media (max-width: 768px) {
    #adminProfileModal {
        padding: 0.75rem;
        align-items: flex-start;
            width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    }
    
    #adminProfileModal .max-w-4xl {
        max-width: 100%;
        border-radius: 1.25rem;
        max-height: 90vh;
    }
    
    #adminProfileModal .p-6 {
        padding: 1rem;
    }
    
    /* Header */
    #adminProfileModal .border-b {
        padding: 1rem;
    }
    
    #profileModalTitle {
        font-size: 1.25rem;
    }
    
    /* Profile Image */
    #adminDisplaySection .w-24 {
        width: 4.5rem;
        height: 4.5rem;
        border-width: 3px;
    }
    
    #adminDisplaySection .absolute.-bottom-2 {
        width: 2.25rem;
        height: 2.25rem;
        bottom: -0.25rem;
        right: 0.25rem;
    }
    
    #adminDisplaySection h2 {
        font-size: 1.35rem;
        margin-top: 1rem;
    }
    
    /* Grid - Switch to single column */
    #adminDisplaySection .grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    /* Info cards */
    #adminDisplaySection .p-4 {
        padding: 0.75rem;
    }
    
    #adminDisplaySection .p-3 {
        padding: 0.625rem;
    }
    
    #adminDisplaySection .w-6 {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    /* Text sizes */
    #displayAdminPhone,
    #displayAdminEmail,
    #displayAdminAddress {
        font-size: 0.95rem;
    }
    
    .text-xs {
        font-size: 0.7rem;
    }
    
    /* Buttons */
    #goToEditBtn,
    #saveAdminProfileBtn,
    #cancelEditBtn {
        padding: 0.75rem;
        font-size: 0.85rem;
        border-radius: 0.75rem;
    }
    
    #goToEditBtn svg,
    #saveAdminProfileBtn svg {
        width: 1rem;
        height: 1rem;
    }
    
    /* Edit Section */
    #adminEditSection .grid {
        gap: 0.75rem;
    }
    
    #adminEditSection input,
    #adminEditSection textarea {
        padding: 0.625rem;
        font-size: 0.875rem;
    }
    
    /* Edit profile image */
    #adminEditSection .w-24 {
        width: 4rem;
        height: 4rem;
    }
    
    /* Flex gap for buttons */
    .flex.gap-3 {
        gap: 0.5rem;
    }
}



/* ========================================
   PWA INSTALL BANNER - FULLY RESPONSIVE
   ======================================== */

.pwa-install-banner {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: calc(100% - 2rem);
    max-width: 500px;
    min-width: 280px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1.25rem;
    padding: 0.875rem 1.25rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
    animation: slideUp 0.4s cubic-bezier(0.21, 1.11, 0.35, 1.01);
}

/* Show state */
.pwa-install-banner.show {
    display: flex;
}

/* Content wrapper */
.pwa-install-content {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex: 1;
}

/* Icon styling */
.pwa-install-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 0.875rem;
    flex-shrink: 0;
}

.pwa-install-icon svg {
    width: 22px;
    height: 22px;
    stroke: white;
    stroke-width: 1.8;
}

/* Text styling */
.pwa-install-text strong {
    font-size: 0.95rem;
    font-weight: 700;
    display: block;
    color: #f8fafc;
}

.pwa-install-text p {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    color: rgba(248, 250, 252, 0.75);
}

/* Actions container */
.pwa-install-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Install button */
.pwa-install-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    border-radius: 0.75rem;
    padding: 0.625rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.pwa-install-btn:hover {
    transform: scale(1.02);
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.pwa-install-btn:active {
    transform: scale(0.98);
}

/* Close button */
.pwa-install-close {
    background: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
    border: none;
    border-radius: 0.5rem;
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.pwa-install-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.pwa-install-close:active {
    transform: scale(0.95);
}

/* ========================================
   ANIMATION
   ======================================== */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Mobile (up to 480px) */
@media screen and (max-width: 480px) {
    .pwa-install-banner {
        width: calc(100% - 1.5rem);
        padding: 0.75rem 1rem;
        border-radius: 1rem;
        bottom: 0.75rem;
    }
    
    .pwa-install-icon {
        width: 36px;
        height: 36px;
    }
    
    .pwa-install-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .pwa-install-text strong {
        font-size: 0.85rem;
    }
    
    .pwa-install-text p {
        font-size: 0.7rem;
    }
    
    .pwa-install-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    .pwa-install-close {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }
}

/* Landscape mode on mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .pwa-install-banner {
        bottom: 0.5rem;
        padding: 0.5rem 1rem;
    }
    
    .pwa-install-icon {
        width: 32px;
        height: 32px;
    }
    
    .pwa-install-text p {
        display: none;
    }
}

/* Tablet (481px - 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .pwa-install-banner {
        max-width: 450px;
    }
}

/* Desktop (769px and above) */
@media screen and (min-width: 769px) {
    .pwa-install-banner {
        max-width: 480px;
        bottom: 1.5rem;
    }
    
    .pwa-install-text strong {
        font-size: 1rem;
    }
    
    .pwa-install-text p {
        font-size: 0.8rem;
    }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */
@media (prefers-color-scheme: dark) {
    .pwa-install-banner {
        background: rgba(15, 23, 42, 0.98);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

@media (max-width: 640px) {
  /* 1. Make the modal container fill the whole screen */
  #itemDetailsModal {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  /* 2. Make the modal content fill the screen with no rounded corners */
  #itemDetailsModal .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    display: flex;
    flex-direction: column;
  }

  /* 4. Reset Tailwind's space-x margin to use gap instead */
   #itemDetailsModal  .flex.space-x-4.mt-6 > * + * {
    margin-left: 0 !important;
  }


}
@media (max-width: 640px) {
    /* Stack the main container items vertically */
    .mobile-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important; /* Space between top row and bottom button */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* Force the top two buttons to stay side-by-side */
    .button-row-top {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 12px !important; /* Space between the two top buttons */
    }

    /* Make both top buttons take up equal 50% width */
    .button-row-top button {
        flex: 1 !important;
        width: 50% !important;
        justify-content: center !important; /* Centers text/icons */
        padding: 12px 8px !important; /* Optimizes padding for mobile screen sizes */
        font-size: 14px !important; /* Prevents text wrap */
    }

    /* Make the bottom button long (full width) */
    #makeAdBtn {
        width: 100% !important;
        justify-content: center !important;
        margin-left: 0 !important; /* Clears Tailwind's space-x-4 spacing rules */
        padding: 12px 16px !important;
    }
}
@media (max-width: 640px) {
.quantity-ActionModal{
  width: 100vw;
  height: 100dvh;
  max-width: 100%;
  max-height: 100%;
  margin: 0px;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
}

.qr-GenerationModal{
  width: 100vw;
  height: 100dvh;
  max-width: 100%;
  max-height: 100%;
  margin: 0px;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
}

 
}

@media (min-width: 1024px) {
    .sidebar-toggle{
        display: none !important;
    }

    #qrGenerationModal {
        align-items: center;
        justify-content: center;
              z-index: 20000000000000999999999999999999999999999999;
    }

    #qrGenerationModal > * {
        width: 90%;
        max-width: 1100px;
        border-radius: 20px;
        transform: scale(0.95);
        opacity: 0;
    }

    #qrGenerationModal.show > * {
        transform: scale(1);
        opacity: 1;
    }
     .format-grid-container {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 12px !important; /* Slight extra breathing room for stacked items */
    }

    /* Expand labels edge-to-edge inside the vertical stack */
    .format-grid-container label {
        width: 100% !important;
    }
    .SearchItems {
  grid-template-columns: repeat(2, minmax(0px, 1fr));
}
}
   .expenseModal{

 background-color: #000000 !important;
}
@media (max-width: 768px) {
  #customerSearchModal {
    padding: 0;
  }

  .customer-search-panel {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
  }

  .modal-body {
    flex-grow: 1;
    overflow-y: auto;
    height: auto; /* Allow flexbox to control height */
  }
  .adminProfileModalcontent{
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .expenseModal{
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
  }
  #adminPanelBtn {
    display: none !important;
  }
  .adminPanelModal{
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  #historyDetailModal {
    padding: 0;
  }

  .historyDetailModalcontent {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
  }
.recordPaymentModal-content{
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .modal-body {
    flex-grow: 1;
    overflow-y: auto;
    height: auto; /* Allow flexbox to control height */
  }
}
@media (max-width: 768px) {
  /* Night Mode Footer Wrapper */
  .night-mode .ct-footer {
    display: flex !important;
    padding: 0.75rem 1rem !important;
    height: auto !important;
    border-top: 1px solid #374151 !important;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3) !important;
  }

  /* Smart looking primary button for mobile dark mode */
  .night-mode .ct-footer .primary-btn {
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    height: auto !important;
    background-color: #3b82f6 !important; /* Brighter Blue for Dark Mode */
    color: #ffffff !important;
    flex: 1;
    border: none;
  }

  /* Ensure body takes remaining space */
  .night-mode .customer-transactions-panel {
    display: flex;
    flex-direction: column;
  }

  .night-mode .ct-body {
    flex-grow: 1;
    overflow-y: auto;
  }
}


.loadingbit {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Cyberpunk neon cyan to deep purple futuristic gradient pulse */
    background: linear-gradient(
        90deg, 
        rgba(0, 242, 254, 0) 0%, 
        rgba(0, 242, 254, 0.15) 35%, 
        rgba(79, 172, 254, 0.4) 50%, 
        rgba(157, 78, 221, 0.15) 65%, 
        rgba(157, 78, 221, 0) 100%
    );
    /* Futuristic cubic-bezier timing function for a high-tech data sweep effect */
    animation: cyberPulse 2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    /* Holographic glow overlay */
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.2);
}

@keyframes cyberPulse {
    0% { 
        transform: translateX(-100%) skewX(-15deg); 
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
    100% { 
        transform: translateX(100%) skewX(-15deg); 
        opacity: 0.3;
    }
}
@media print {
    /* Hide the entire controls container */
    .sticky.top-0,
    #executePrintBtn,
    #printPreviewMenuBtn,
    #printPreviewMenuDropdown,
    #closePrintPreviewBtn,
    .print-controls-container,
    .mobile-drawer ,.mobile-bottom-nav {
        display: none !important;
    }
    
    
    #receiptModal {
        background-color: #ffffff !important;
   
    }
     #doneEditingBtn,
    #saveReceiptModificationsBtn,
    #printReceiptBtn,
    #downloadPdfBtn,
    #shareReceiptBtn,
    #scrollTopBtn {
        display: none !important;
    }
}
    
 .adminPanelModal {
    z-index: 999999 !important; /* Extremely high z-index to stay above everything */
    background-color: rgb(35, 35, 42) !important; /* Dark background color */
    position: fixed !important;
    isolation: isolate; /* Creates new stacking context */
}

#adminPanelContent {
    z-index: 999999 !important;
    position: relative;
    background-color: rgb(35, 35, 42) !important; /* Match background */
}

/* Ensure the modal overlay is also above everything */
.adminPanelModal::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999998;
}

/* Fix the buttons and content visibility */
.adminPanelModal .admin-btn {
    position: relative;
    z-index: 1000000;
}

.adminPanelModal .social-btn {
    position: relative;
    z-index: 1000000;
}

/* Ensure all interactive elements work */
.adminPanelModal * {
    pointer-events: auto !important;
}

/* Smooth transition */
.adminPanelModal {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.adminPanelModal.hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.adminPanelModal:not(.hidden) {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Fix for the close button */
#closeAdminPanelBtn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1000001;
    color: white !important;
}

/* Dark theme for text */
.adminPanelModal .text-3xl {
    color: white !important;
}

.adminPanelModal span[data-translate] {
    color: white;
}

/* Clock styling */
.clock-container {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

#currentTime, #currentDate {
    color: white;
    font-weight: bold;
}

/* Responsive width */
@media (max-width: 640px) {
    .adminPanelModal {
        width: 100% !important;
    }
    body.night-mode .managerProfileModal {
  max-height: 90vh;
  overflow-y: auto;
}

#salesProfileModal {
  padding: 1rem;
}
}

/* The backdrop/container */
#salesProfileModal {
  align-items: center;
  justify-content: center;
  padding: 1rem; /* Space around the modal on mobile */
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent backdrop */
}

/* The actual modal box */
#salesProfileModal > div {
  width: 100%;
  max-width: 56rem; /* Equivalent to max-w-4xl */
  max-height: 90vh; /* Keeps it within the screen height */
  overflow-y: auto; /* Adds a scrollbar if content is too long */
  border-radius: 1rem;
  flex-direction: column;
}