/* ==========================================
   TATHMEER EXPENSES - CUSTOM STYLES
   ========================================== */

/* --- Layout --- */
body { 
    font-family: 'Tajawal', sans-serif; 
    background-color: #f8fafc; 
    -webkit-tap-highlight-color: transparent; 
}

/* --- Form Elements --- */
input[type=number]::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

/* --- Animations --- */
.slide-down { 
    animation: slideDown 0.3s ease-out forwards; 
    transform-origin: top; 
}

@keyframes slideDown { 
    from { 
        opacity: 0; 
        transform: scaleY(0); 
        max-height: 0; 
    } 
    to { 
        opacity: 1; 
        transform: scaleY(1); 
        max-height: 1000px; 
    } 
}

/* --- Scrollbar --- */
.hide-scroll::-webkit-scrollbar { 
    display: none; 
}

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

/* --- Mobile Optimization --- */
.app-container { 
    max-width: 100%; 
    width: 100%; 
    overflow-x: hidden; 
}

/* --- Components --- */
.btn-primary { 
    width: 100%; 
    background-color: #1d4ed8; 
    color: white; 
    padding-top: 0.75rem; 
    padding-bottom: 0.75rem; 
    border-radius: 0.75rem; 
    font-weight: 700; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
    transition: transform 0.2s;
}

.btn-primary:active { 
    transform: scale(0.95); 
}

.calendar-dot { 
    width: 4px; 
    height: 4px; 
    background-color: #10b981; 
    border-radius: 50%; 
    margin: 2px auto 0; 
}