/* Dark Premium Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #10b981, #059669);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #34d399;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

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

/* Force Native Dark Mode UIs for Date Pickers & Selects */
:root {
    color-scheme: dark;
}

/* Glassmorphism Utilities */
.glass-panel {
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card {
    background: rgba(31, 41, 55, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.glass-card:hover {
    background: rgba(31, 41, 55, 0.6);
    border-color: rgba(16, 185, 129, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.tab-active {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    border: none;
}

.tab-inactive {
    background: rgba(255, 255, 255, 0.05);
    color: #9ca3af;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tab-inactive:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Dark Input Fields */
.input-field {
    background-color: rgba(17, 24, 39, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    width: 100%;
    transition: all 0.3s;
    font-size: 0.95rem;
    color: white;
}

.input-field:focus {
    border-color: #10b981;
    outline: none;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
    background-color: rgba(17, 24, 39, 0.9);
}

/* Placeholder Color Override */
::placeholder {
    color: #6b7280;
    opacity: 1;
}

.table-input {
    background: transparent;
    border: 1px solid transparent;
    width: 100%;
    padding: 6px;
    color: white;
}

.table-input:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.table-input:focus {
    border-color: #10b981;
    background-color: rgba(17, 24, 39, 0.8);
    outline: none;
    border-radius: 4px;
}

/* Modern Professional Dropdown Styles (ToDesktop Inspired) */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(26, 26, 36, 0.6);
    /* Deep indigo/slate glass */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 40px 12px 18px !important;
    color: #e2e8f0;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    outline: none;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    /* Premium glossy inner bevel */
    /* Subtle Gray/White Chevron to match the screenshot */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1.2rem center !important;
    background-size: 1.1rem !important;
}

select:hover {
    background-color: rgba(35, 35, 48, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

select:focus {
    background-color: rgba(26, 26, 36, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Option styling (Premium feel for the dropdown list) */
select option {
    background-color: #1a1a24;
    color: #e2e8f0;
    font-size: 1rem;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* very subtle delimiter */
}

select option:hover,
select option:focus,
select option:active,
select option:checked {
    background-color: #2b2b3b !important;
    color: #ffffff !important;
    /* This box-shadow hack forces background color changes on some strict browsers */
    box-shadow: inset 0 0 10px 100px #2b2b3b !important;
}

/* Fix Date Picker Default Icon Alignments & Appearance */
input[type="date"] {
    position: relative;
    cursor: pointer;
}

/* Ensure the native calendar icon is clickable everywhere */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.8;
    transition: 0.2s;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Mobile Touch Targets */
@media (max-width: 768px) {
    .btn-touch {
        min-height: 48px;
        min-width: 48px;
    }
}

/* Background Glow Animation */
.glow-bg {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    top: -20%;
    left: -10%;
    z-index: 0;
    pointer-events: none;
}

/* Modern Mobile Professional Tweaks */
@media (max-width: 768px) {

    input,
    select,
    textarea,
    button {
        font-size: 16px !important;
    }

    /* Prevent iOS Auto-Zoom */

    #pos-view.flex-col {
        flex-direction: column;
        height: auto;
    }

    #pos-view>section.order-1 {
        min-height: 50vh;
    }

    #pos-view>section.order-2 {
        position: relative;
        width: 100%;
        background: rgba(15, 23, 42, 0.97);
        border-top: 1px solid rgba(16, 185, 129, 0.3);
        border-top-left-radius: 1.75rem;
        border-top-right-radius: 1.75rem;
        padding-bottom: 2rem;
    }

    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .overflow-x-auto::-webkit-scrollbar {
        display: none;
    }

    .glass-card {
        padding: 1rem !important;
        /* Denser cards */
    }

    h2.text-2xl,
    h2.text-3xl {
        font-size: 1.5rem !important;
        /* Tighter headers */
        margin-bottom: 1rem !important;
    }

    .gap-6 {
        gap: 1rem !important;
    }
}