/* Minimal CSS for custom behaviors that can't be done with Tailwind utilities */
/* Most styles are now handled by Tailwind CSS */

/* Input label floating animation */
.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label,
.input-group select ~ label,
.input-group textarea:focus ~ label,
.input-group textarea:not(:placeholder-shown) ~ label {
    top: 0.4rem;
    transform: none;
    font-size: 0.7rem;
    color: #6366f1;
    font-weight: 600;
}

/* Sidebar - text always visible now */

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

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

@keyframes slideIn {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Select dropdown arrow */
select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

/* Grid pattern background */
.bg-grid-pattern {
    background-image: 
        linear-gradient(to right, rgba(99, 102, 241, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Desktop sidebar styles */
@media screen and (min-width: 769px) {
    .sidebar {
        width: 240px !important;
        min-height: 100vh !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        flex-direction: column !important;
    }
    
    .main-content {
        margin-left: 240px !important;
    }
}

/* Mobile styles - must override Tailwind */
@media screen and (max-width: 768px) {
    .sidebar {
        width: 100vw !important;
        height: auto !important;
        min-height: auto !important;
        max-height: 70px !important;
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: row !important;
        border-right: none !important;
        border-top: 1px solid rgba(229, 231, 235, 0.5) !important;
        border-bottom: none !important;
        z-index: 1000 !important;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    .sidebar:hover {
        width: 100% !important;
    }
    
    .sidebar-header,
    .sidebar-footer {
        display: none !important;
    }
    
    .sidebar-nav {
        flex-direction: row !important;
        justify-content: space-around !important;
        width: 100% !important;
        padding: 0.5rem !important;
        gap: 0 !important;
        flex: 1 !important;
    }
    
    .nav-btn {
        flex-direction: column !important;
        padding: 0.5rem !important;
        gap: 0.25rem !important;
        flex: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    
    .nav-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .nav-btn span {
        font-size: 0.65rem !important;
        opacity: 1 !important;
        white-space: nowrap !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        margin-bottom: 70px !important;
        padding-bottom: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .page {
        padding: 1rem !important;
    }
    
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    
    .filters-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .search-box {
        max-width: none !important;
    }
    
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    
    .form-grid .full-width {
        grid-column: span 1 !important;
    }
    
    .leg-row {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    .btn-remove-leg {
        width: 100% !important;
    }
}