/* Main CSS for Markeystem - Kurdish Accounting System */

/* Unicode and Kurdish Text Support */
@charset "UTF-8";

/* Font Setup with proper Unicode support */
* { 
    font-family: 'Noto Kufi Arabic', 'Segoe UI', 'Roboto', 'Arial Unicode MS', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* RTL Support for Kurdish text */
.font-kurdish, [lang="ku"] {
    direction: rtl;
    text-align: right;
    font-family: 'Noto Kufi Arabic', 'Segoe UI', sans-serif;
    unicode-bidi: bidi-override;
}

/* Unicode icon support */
.icon-unicode {
    font-family: 'Segoe UI Symbol', 'Segoe UI Emoji', 'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji';
    font-variant-emoji: emoji;
    text-rendering: optimizeLegibility;
}

/* Core Animations */
.fade-in { 
    animation: fadeIn 0.6s ease-out; 
}

.fade-in-up { 
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
}

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

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

/* Hover Effects */
.hover-scale { 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}

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

.hover-lift {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* Glass Effects */
.glass-effect { 
    backdrop-filter: blur(10px); 
    background: rgba(255, 255, 255, 0.9); 
}

.glass {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.glass-card {
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Text Effects */
.gradient-text { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

/* Card Effects */
.card-hover { 
    transition: all 0.3s ease; 
}

.card-hover:hover { 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
}

/* Animation Effects */
.pulse-animation { 
    animation: pulse 2s infinite; 
}

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

.floating { 
    animation: floating 3s ease-in-out infinite; 
}

@keyframes floating { 
    0%, 100% { transform: translateY(0px); } 
    50% { transform: translateY(-5px); } 
}

.pulse-glow { 
    animation: pulse-glow 2s infinite; 
}

@keyframes pulse-glow { 
    0%, 100% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.4); } 
    50% { box-shadow: 0 0 40px rgba(102, 126, 234, 0.8); } 
}

/* Background Effects */
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    min-height: 100vh;
    position: relative;
}

.gradient-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
}

/* Button Styles */
.btn-modern {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-modern:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-modern:hover:before {
    left: 100%;
}

.btn-success { 
    background: linear-gradient(135deg, #10b981 0%, #059669 100%); 
}

.btn-success:hover { 
    background: linear-gradient(135deg, #059669 0%, #047857 100%); 
}

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

/* Product Search Suggestions */
.product-suggestion {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    margin: 2px 0;
}

.product-suggestion:hover {
    background: #f3f4f6;
    transform: translateX(-2px);
}

/* Mobile Bottom Menu Styles */
.mobile-bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 50;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

.mobile-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    text-decoration: none;
    color: #6b7280;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 4px;
}

.mobile-menu-item:hover,
.mobile-menu-item.active {
    color: #4f46e5;
    background: rgba(79, 70, 229, 0.1);
    transform: translateY(-2px);
}

.mobile-menu-icon {
    font-size: 20px;
    margin-bottom: 2px;
}

.mobile-menu-text {
    font-size: 10px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .mobile-bottom-menu {
        display: block;
    }
    
    .mobile-menu-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
        padding: 8px 12px 16px;
    }
    
    /* Add bottom padding to prevent content from being hidden behind menu */
    body {
        padding-bottom: 80px;
    }
}

@media (max-width: 640px) {
    .mobile-menu-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Hide desktop navigation on mobile when bottom menu is active */
@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }
}
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    transform: translateX(4px);
    border-left: 4px solid #0ea5e9;
}

/* Utility Classes */
.z-high { z-index: 9999; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.overflow-hidden { overflow: hidden; }

/* Responsive Design Helpers */
@media (max-width: 768px) {
    .hover-scale:hover,
    .hover-lift:hover {
        transform: none;
        box-shadow: none;
    }
    
    .floating {
        animation: none;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .glass-effect,
    .glass,
    .glass-card {
        background: white !important;
        backdrop-filter: none !important;
        border: 1px solid #ddd !important;
    }
    
    * {
        color: black !important;
        background: white !important;
    }
}

/* Tailwind CSS Overrides - These must come last */
.dashboard-nav {
    background: linear-gradient(to right, #1e40af, #1e3a8a, #7c3aed) !important;
}

.quick-actions-bar {
    background: linear-gradient(to right, #f9fafb, #eff6ff) !important;
}

.stats-card-green {
    background: linear-gradient(to bottom right, #10b981, #059669, #047857) !important;
}

.stats-card-blue {
    background: linear-gradient(to bottom right, #3b82f6, #2563eb, #1d4ed8) !important;
}

.stats-card-purple {
    background: linear-gradient(to bottom right, #8b5cf6, #7c3aed, #6d28d9) !important;
}

.stats-card-red {
    background: linear-gradient(to bottom right, #ef4444, #dc2626, #b91c1c) !important;
}

.nav-store-name {
    color: white !important;
}

/* Force font family on all elements */
*, *::before, *::after {
    font-family: 'Noto Kufi Arabic', sans-serif !important;
}