/* ==========================================================================
   SAMBARA POS & CLIENT AREA - GLOBAL UNIFIED STYLESHEET (globalstyle.css)
   ========================================================================== */

/* --- 1. GLOBAL RESET & BASE TYPOGRAPHY --- */
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #ecfdf5;
}

/* --- 2. SCROLLBAR UTILITIES --- */
/* Global Custom Scrollbar */
.custom-scroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(82, 183, 136, 0.3);
    border-radius: 20px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(82, 183, 136, 0.6);
}

/* POS Dedicated Scrollbar */
.pos-scroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.pos-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.pos-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(16, 185, 129, 0.25);
    border-radius: 10px;
}

.pos-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(16, 185, 129, 0.5);
}

/* Hide Scrollbar while keeping scroll functionality */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Default Browser Scrollbar Override */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(82, 183, 136, 0.2);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(82, 183, 136, 0.5);
}

/* --- 3. ANIMASI GLOBAL --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.animate-scroll {
    display: flex;
    width: max-content;
    animation: scroll 30s linear infinite;
}

.animate-scroll:hover {
    animation-play-state: paused;
}

.fade-mask {
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* Dynamic Living Background & Mesh Orbs */
@keyframes livingBg {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.living-bg {
    background: linear-gradient(-45deg, #091a12, #143728, #1b4332, #0e291c, #1f4e3a) !important;
    background-size: 400% 400% !important;
    animation: livingBg 16s ease infinite !important;
}

.tech-grid-bg {
    background-image: radial-gradient(rgba(82, 183, 136, 0.14) 1px, transparent 1px);
    background-size: 28px 28px;
}

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0px, 0px) scale(1); }
    50% { transform: translate(60px, -40px) scale(1.15); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0px, 0px) scale(1); }
    50% { transform: translate(-50px, 50px) scale(1.2); }
}

.ambient-orb-1 {
    animation: orbFloat1 14s ease-in-out infinite;
}

.ambient-orb-2 {
    animation: orbFloat2 18s ease-in-out infinite;
}

/* AI Data Stream Beams */
@keyframes dataStreamFlow {
    0% {
        transform: translateY(-120px);
        opacity: 0;
    }
    25% {
        opacity: 0.4;
    }
    75% {
        opacity: 0.4;
    }
    100% {
        transform: translateY(105vh);
        opacity: 0;
    }
}

.data-stream-line {
    position: fixed;
    width: 1.5px;
    height: 160px;
    background: linear-gradient(180deg, transparent 0%, rgba(82, 183, 136, 0.7) 50%, rgba(251, 191, 36, 0.9) 80%, transparent 100%);
    box-shadow: 0 0 10px rgba(82, 183, 136, 0.4);
    pointer-events: none;
    z-index: 1;
    animation: dataStreamFlow 7s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Mascot Animation */
@keyframes floatRobot {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

.animate-float-robot {
    animation: floatRobot 4.5s ease-in-out infinite;
}

/* Mobile Bottom Sheet Drawer Animation */
.bottom-sheet {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* --- 4. GLASSMORPHISM CARDS & NAVBAR --- */
.glass-card-dark {
    background: rgba(14, 39, 27, 0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(82, 183, 136, 0.22);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(82, 183, 136, 0.08) inset;
}

.glass-card-light {
    background: rgba(254, 250, 224, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    color: #0f291e;
}

.glass-nav {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
}

/* --- 5. GRADIENTS & TYPOGRAPHY --- */
.text-gradient-insta {
    background: linear-gradient(135deg, #74c69d 0%, #52b788 40%, #f59e0b 80%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-cream {
    background: linear-gradient(135deg, #ffffff 0%, #fefae0 60%, #d8f3dc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient {
    background: linear-gradient(to right, #10b981, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Anti-Flicker Preload */
.preload, .preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/* --- 6. THEME MODE SWITCHER (DEFAULT FOREST VS DARK PITCH) --- */
/* Theme Default (Forest Green) */
.theme-default {
    background-color: #0b1e15;
    color: #ecfdf5;
}

.theme-default h1, 
.theme-default h2, 
.theme-default h3, 
.theme-default h4,
.theme-default .text-white {
    color: #f4fbf7 !important;
}

.theme-default .text-slate-300,
.theme-default .text-slate-400 {
    color: #a7f3d0 !important;
}

.theme-default .text-slate-500 {
    color: #6ee7b7 !important;
}

.theme-default .glass-card-dark {
    background: rgba(14, 39, 27, 0.75) !important;
    backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(82, 183, 136, 0.22) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(82, 183, 136, 0.08) inset !important;
}

/* Theme Dark (Pitch Dark Minimalist) */
.theme-dark,
.theme-dark body {
    background-color: #0d1117 !important;
    background-image: none !important;
    color: #f1f5f9 !important;
}

.theme-dark .ambient-orb-1,
.theme-dark .ambient-orb-2 {
    display: none !important;
}

.theme-dark #sidebar,
.theme-dark #mobile-sidebar > div {
    background-color: #161b22 !important;
    backdrop-filter: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark #sidebar .border-b,
.theme-dark #sidebar .border-t {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background-color: #0d1117 !important;
}

.theme-dark #sidebar a.bg-emerald-500\/20 {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-left-color: #3b82f6 !important;
}

.theme-dark #sidebar .text-emerald-400,
.theme-dark #sidebar .text-emerald-300 {
    color: #94a3b8 !important;
}

.theme-dark header {
    background-color: #161b22 !important;
    backdrop-filter: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .glass-card-dark {
    background: #161b22 !important;
    backdrop-filter: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.theme-dark .bg-forest-950\/80,
.theme-dark .bg-forest-950\/90,
.theme-dark .bg-forest-950\/60,
.theme-dark .bg-forest-950\/40,
.theme-dark .bg-forest-950 {
    background-color: #0d1117 !important;
}

.theme-dark .bg-forest-900\/60,
.theme-dark .bg-forest-900\/70,
.theme-dark .bg-forest-900\/80,
.theme-dark .bg-forest-900\/90,
.theme-dark .bg-forest-900 {
    background-color: #161b22 !important;
}

.theme-dark .border-emerald-500\/10,
.theme-dark .border-emerald-500\/15,
.theme-dark .border-emerald-500\/20,
.theme-dark .border-emerald-500\/30,
.theme-dark .border-emerald-500\/40,
.theme-dark .border-emerald-500\/50 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .text-gradient-insta {
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* --- 7. SELECT2 CUSTOM THEME STYLES (UNIVERSAL CLIENT) --- */
.select2-container--default .select2-selection--single {
    background-color: rgba(10, 29, 20, 0.9) !important;
    border: 1px solid rgba(82, 183, 136, 0.3) !important;
    border-radius: 1rem !important;
    height: 3rem !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    padding-left: 2.5rem !important;
    font-size: 0.875rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 3rem !important;
    right: 10px !important;
}

.select2-dropdown {
    background-color: #112a1d !important;
    border: 1px solid rgba(82, 183, 136, 0.3) !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #0a1d14 !important;
    border: 1px solid rgba(82, 183, 136, 0.3) !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    outline: none !important;
}

.select2-container--default .select2-results__option--selected {
    background-color: #1b4332 !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #40916c !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option {
    color: #e2e8f0 !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
}

/* --- 8. SWEETALERT2 DINAMIS --- */
div:where(.swal2-container) div:where(.swal2-popup) {
    background-color: var(--bg-card, #0a1d14) !important;
    border: 1px solid var(--border-color, rgba(82, 183, 136, 0.3)) !important;
    color: var(--text-main, #ffffff) !important;
    border-radius: 1.5rem !important;
}

div:where(.swal2-container) .swal2-title {
    color: var(--text-main, #ffffff) !important;
}

div:where(.swal2-container) .swal2-html-container {
    color: var(--text-mute, #cbd5e1) !important;
}

div:where(.swal2-container) .swal2-input,
div:where(.swal2-container) .swal2-select,
div:where(.swal2-container) .swal2-textarea {
    background-color: var(--bg-input, #091a12) !important;
    color: var(--text-main, #ffffff) !important;
    border: 1px solid var(--border-color, rgba(82, 183, 136, 0.3)) !important;
    border-radius: 0.75rem !important;
    outline: none !important;
}

div:where(.swal2-container) .swal2-select option {
    background-color: var(--bg-card, #0a1d14) !important;
    color: var(--text-main, #ffffff) !important;
}

div:where(.swal2-container) .swal2-confirm {
    background-color: var(--accent-color, #10b981) !important;
    color: #022c22 !important;
    font-weight: 800 !important;
    border: none !important;
    border-radius: 1rem !important;
}

div:where(.swal2-container) .swal2-cancel {
    background-color: var(--bg-input, #112a1d) !important;
    color: var(--text-mute, #94a3b8) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15)) !important;
    border-radius: 1rem !important;
}

div:where(.swal2-icon).swal2-error {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

div:where(.swal2-icon).swal2-success {
    border-color: #10b981 !important;
    color: #10b981 !important;
}