/* ==========================================
   1. GLOBAL & SCROLLBAR
   ========================================== */
:root {
    --brand-primary: #2563eb;
    --brand-secondary: #3b82f6;
    --brand-light: #eff6ff;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-500: #64748b;
    --slate-800: #1e293b;
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    -webkit-tap-highlight-color: transparent;
}

body {
    overscroll-behavior-y: contain;
}

/* Custom scrollbar - Clean Modern UI */
::-webkit-scrollbar { 
    width: 5px; 
    height: 5px;
}
::-webkit-scrollbar-track { 
    background: transparent; 
}
::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: #94a3b8; 
}

/* Typography Selection */
::selection {
    background-color: var(--brand-secondary);
    color: white;
}

/* ==========================================
   2. VIEW SECTIONS & ANIMATIONS
   ========================================== */
.view-section { 
    display: none; 
    opacity: 0;
}

.view-section.active { 
    display: block; 
    animation: smoothFadeIn var(--transition-base) forwards; 
}

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

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.modal-animate-in {
    animation: modalFadeIn var(--transition-fast) forwards;
}

/* ==========================================
   3. SIDEBAR & NAVIGATION
   ========================================== */
.sidebar-transition { 
    transition: transform var(--transition-base); 
}

.nav-btn {
    transition: all var(--transition-fast);
}

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

/* ==========================================
   4. INPUTS & FORMS
   ========================================== */
input, textarea, select {
    transition: all var(--transition-fast) !important;
}

input:focus, textarea:focus, select:focus {
    transform: translateY(-1px);
}

/* Remove Arrows from Number Inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ==========================================
   5. CUSTOM COMPONENTS
   ========================================== */
.custom-datalist-container ul {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    max-height: 220px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.custom-datalist-container ul::-webkit-scrollbar {
    width: 4px;
}

.custom-datalist-container ul::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

/* Button & Touch Targets for Mobile */
button, .cursor-pointer {
    min-height: 44px; /* Apple recommendation for touch targets */
    display: inline-flex;
    align-items: center;
}

.icon-btn {
    min-height: auto;
    width: 40px;
    height: 40px;
}

/* Card Improvements */
.product-card {
    transition: all var(--transition-base);
}

@media (hover: hover) {
    .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
}

/* SVG Icon alignment */
.lucide {
    display: inline-block;
    vertical-align: middle;
}

/* Real-time Indicator */
.online-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
}

.online-dot::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: inherit;
    border-radius: inherit;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Media Selector Modal Specifics */
.media-option-btn {
    transition: all var(--transition-fast);
}

.media-option-btn:active {
    transform: scale(0.95);
    background-color: var(--brand-light);
}

/* Shadow Utilities */
.shadow-soft {
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 10px -2px rgba(0, 0, 0, 0.02);
}

.shadow-card {
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 8px 15px -8px rgba(0, 0, 0, 0.03);
}

/* Custom Nav Item Styling */
.nav-btn .nav-icon {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-btn:hover .nav-icon {
    transform: scale(1.05) rotate(3deg);
}

/* Glassmorphism Effect for Header */
.header-glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Animations for Custom Datalist */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.animate-in {
    animation-duration: 200ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in { animation-name: fadeIn; }
.slide-in-from-top-2 { animation-name: slideInDown; }