/* Padel Training App Styles */

body {
    background-color: #f8f9fa;
}

/* Sidebar */
#sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

#sidebar .nav-link.active,
#nav-links-mobile .nav-link.active {
    background-color: rgba(255,255,255,0.15);
    font-weight: 600;
}

#sidebar .nav-link:hover,
#nav-links-mobile .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
}

/* Cards */
.card {
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.card-header {
    background-color: white;
    border-bottom: 1px solid #eee;
}

/* Range sliders */
.form-range::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
}

/* Mobile friendly tap targets */
@media (max-width: 767.98px) {
    .form-check-input {
        min-width: 2em;
        min-height: 2em;
    }

    .form-check-label {
        padding-top: 0.25em;
        font-size: 1rem;
    }

    .btn-sm {
        padding: 0.4rem 0.75rem;
    }

    .table td, .table th {
        padding: 0.4rem;
        font-size: 0.85rem;
    }

    #main-content {
        padding-bottom: 2rem !important;
    }

}

/* Supplement toggles */
.form-check.form-switch .form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
}

/* Quick stats cards */
.card .fs-3 {
    line-height: 1;
}

/* Progress bars */
.progress {
    border-radius: 10px;
}

/* Chart containers */
canvas {
    max-width: 100%;
}

/* Plan viewer */
.list-group-item.active {
    background-color: #0d6efd;
}

/* Login */
#login-screen .card {
    border-radius: 12px;
}

/* Smooth transitions */
#view-container {
    animation: fadeIn 0.15s ease-in;
}

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