@import "tailwindcss";

@layer utilities {
    /* Custom scrollbar for POS cart & catalog */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    ::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.4);
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(148, 163, 184, 0.7);
    }
}

/* ==========================================================================
   SUPER POS MASAAN 3-THEME SYSTEM (WHITE, DARK, ELEGAN) WITH HIGH CONTRAST
   ========================================================================== */

/* 1. THEME WHITE (CLEAN CRISP LIGHT MODE) */
.theme-white {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

.theme-white .bg-white {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
}

.theme-white .text-gray-900,
.theme-white .text-gray-800,
.theme-white .text-slate-900,
.theme-white .text-slate-800 {
    color: #0f172a !important;
}

.theme-white .text-gray-700,
.theme-white .text-gray-600 {
    color: #334155 !important;
}

.theme-white .text-gray-500,
.theme-white .text-gray-400 {
    color: #64748b !important;
}

.theme-white input,
.theme-white select,
.theme-white textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

.theme-white thead {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}

/* 2. THEME DARK (OBSIDIAN NIGHT MODE) */
.theme-dark {
    background-color: #090d16 !important;
    color: #f8fafc !important;
}

.theme-dark .bg-white {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #1e293b !important;
}

.theme-dark .bg-gray-50 {
    background-color: #1e293b/60 !important;
    color: #f8fafc !important;
}

.theme-dark .text-gray-900,
.theme-dark .text-gray-800,
.theme-dark .text-slate-900,
.theme-dark .text-slate-800 {
    color: #f8fafc !important;
}

.theme-dark .text-gray-700,
.theme-dark .text-gray-600 {
    color: #cbd5e1 !important;
}

.theme-dark .text-gray-500,
.theme-dark .text-gray-400 {
    color: #94a3b8 !important;
}

.theme-dark input,
.theme-dark select,
.theme-dark textarea {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

.theme-dark thead {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
}

.theme-dark tbody tr:hover {
    background-color: rgba(30, 41, 59, 0.7) !important;
}

/* 3. THEME ELEGAN (MIDNIGHT SAPPHIRE & GOLD LUXURY) */
.theme-elegan {
    background-color: #060911 !important;
    color: #fef3c7 !important;
}

.theme-elegan .bg-white {
    background-color: #0c1220 !important;
    color: #fef3c7 !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
    box-shadow: 0 4px 20px -2px rgba(245, 158, 11, 0.05) !important;
}

.theme-elegan .bg-gray-50 {
    background-color: #121a2d !important;
    color: #fef3c7 !important;
}

.theme-elegan .text-gray-900,
.theme-elegan .text-gray-800,
.theme-elegan .text-slate-900,
.theme-elegan .text-slate-800 {
    color: #fde68a !important;
}

.theme-elegan .text-gray-700,
.theme-elegan .text-gray-600 {
    color: #e2e8f0 !important;
}

.theme-elegan .text-gray-500,
.theme-elegan .text-gray-400 {
    color: #94a3b8 !important;
}

.theme-elegan input,
.theme-elegan select,
.theme-elegan textarea {
    background-color: #101726 !important;
    color: #fef3c7 !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

.theme-elegan thead {
    background-color: #101726 !important;
    color: #d97706 !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

.theme-elegan tbody tr:hover {
    background-color: rgba(245, 158, 11, 0.06) !important;
}