/* ==========================================================
   FOCUSTRACK - RESPONSIVE STYLES
========================================================== */

/* Tablets */
@media (max-width: 992px) {
    .container {
        width: min(100%, calc(100% - 1.5rem));
    }

    .section-title {
        font-size: 1.8rem;
    }

    .card {
        padding: 1.5rem;
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .flex-between {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .card {
        padding: 1.25rem;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    .container {
        width: min(100%, calc(100% - 1rem));
    }

    .section-title {
        font-size: 1.4rem;
    }

    input,
    textarea,
    select {
        padding: 0.9rem 1rem;
    }

    .btn {
        padding: 0.85rem 1.4rem;
        font-size: 0.9rem;
    }
}



/* ==========================================================
   INDEX PAGE RESPONSIVE STYLES
========================================================== */

/* Tablets */
@media (max-width: 992px) {
    .hero-logo {
        width: 200px;
        height: 200px;
    }

    .hero-description {
        font-size: 1rem;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    .hero {
        padding: 3rem 0 2rem;
    }

    .hero-logo {
        width: 170px;
        height: 170px;
        margin-bottom: 1.5rem;
    }

    .hero-logo img {
        width: 75%;
        height: 75%;
    }

    .hero-tagline {
        font-size: 0.85rem;
        letter-spacing: 0.18em;
        line-height: 1.8;
    }

    .hero-description {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    .hero-actions {
        width: 100%;
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
        max-width: 280px;
    }

    .features {
        padding: 3rem 0 4rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    .hero-logo {
        width: 150px;
        height: 150px;
    }

    .hero-title {
        font-size: 2.4rem;
    }

    .hero-description {
        font-size: 0.9rem;
    }

    .feature-icon {
        font-size: 2rem;
    }
}


/* ==========================================================
   AUTH PAGE RESPONSIVE STYLES
========================================================== */

@media (max-width: 768px) {
    .auth-card {
        max-width: 100%;
        padding: 2.25rem 1.5rem;
    }

    .auth-logo {
        width: 85px;
        height: 85px;
        margin-bottom: 1.25rem;
    }

    .auth-title {
        font-size: 1.9rem;
    }

    .auth-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1.75rem;
    }

    .auth-footer {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .auth-card {
        padding: 2rem 1.25rem;
        border-radius: 18px;
    }

    .auth-logo {
        width: 75px;
        height: 75px;
    }

    .auth-title {
        font-size: 1.7rem;
    }

    .back-home {
        font-size: 0.85rem;
    }
}


/* ==========================================================
   DASHBOARD RESPONSIVE STYLES
========================================================== */

/* Tablets */
@media (max-width: 992px) {
    .dashboard {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .sidebar {
        padding: 1.5rem;
    }

    .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .nav-link {
        flex: 1 1 calc(50% - 0.5rem);
        text-align: center;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    .dashboard {
        padding: 1rem;
    }

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
    }

    .dashboard-header h1 {
        font-size: 1.6rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .tasks-header {
        flex-direction: column;
        align-items: stretch;
    }

    .tasks-header input {
        max-width: 100%;
    }

    .sidebar-brand {
        margin-bottom: 1.5rem;
    }

    .nav-link {
        flex: 1 1 100%;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    .dashboard-header,
    .tasks-section {
        padding: 1.25rem;
    }

    .stat-card h2 {
        font-size: 1.8rem;
    }

    .tasks-header h2 {
        font-size: 1.4rem;
    }

    .task-item {
        padding: 1.25rem;
    }
}
@media (max-width: 768px) {
    .task-controls {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .task-controls input,
    .task-controls select {
        min-width: 100%;
    }
}

/* ==========================================================
   PROFILE PAGE RESPONSIVE STYLES
========================================================== */

@media (max-width: 768px) {
    .profile-card {
        padding: 1.75rem;
    }

    .profile-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .profile-top h2 {
        font-size: 1.6rem;
    }

    .profile-details {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .profile-item {
        padding: 1.25rem;
    }
}

@media (max-width: 480px) {
    .profile-card {
        padding: 1.25rem;
    }

    .profile-avatar {
        width: 75px;
        height: 75px;
        font-size: 1.6rem;
    }

    .profile-top h2 {
        font-size: 1.4rem;
    }

    .profile-item p {
        font-size: 0.95rem;
    }
}