/* Custom CSS for Calculator Hub */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Basic focus styles */
*:focus {
    outline: 1px solid #3B82F6;
}

/* Hide scrollbar for navigation */
#nav-menu {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#nav-menu::-webkit-scrollbar {
    display: none;
}

/* Calculator button hover effects */
.basic-btn {
    transition: all 0.2s ease;
    user-select: none;
}

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

/* Custom slider styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    background: #E5E7EB;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #8B5CF6;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #8B5CF6;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Loading animation */
.calculator-section {
    animation: fadeIn 0.3s ease-in-out;
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    #nav-menu {
        display: flex !important;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .nav-link {
        display: inline-block;
        white-space: nowrap;
    }
}

/* Print styles */
@media print {
    .no-print,
    nav,
    footer,
    button {
        display: none !important;
    }
    
    .calculator-section {
        box-shadow: none !important;
        border: 1px solid #ccc;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    /* This would be enhanced if dark mode toggle was implemented */
}

/* Basic responsive design improvements */

/* Custom utility classes */
.shadow-custom {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.text-shadow {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Performance optimizations */
.calculator-section {
    contain: layout style paint;
}

/* Improved button states */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

button:disabled:hover {
    transform: none;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Form validation styles */
input:invalid {
    border-color: #EF4444;
}

input:valid {
    border-color: #10B981;
}

/* Loading state for buttons */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: currentColor;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enhanced mobile navigation */
@media (max-width: 768px) {
    #mobile-nav {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }
    
    #mobile-nav:not(.hidden) {
        max-height: 500px;
        transition: max-height 0.3s ease-in;
    }
}

/* Error state styles */
.error {
    border-color: #EF4444 !important;
    background-color: #FEF2F2;
}

.error-message {
    color: #EF4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Success state styles */
.success {
    border-color: #10B981 !important;
    background-color: #F0FDF4;
}

/* Tooltip styles */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #374151;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.75rem;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Grid improvements for better layout */
.calculator-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Basic focus indicators */
button:focus {
    outline: 1px solid #3B82F6;
}

input:focus {
    outline: 1px solid #3B82F6;
}