/* === Responsive Styles === */

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    .Logo {
        width: 100px;
    }

    .navbar {
        padding: 8px 0;
    }

    .container-fluid {
        padding: 0 10px;
    }

    h2 {
        font-size: 1.5rem;
    }

    .auth-form input,
    .auth-form button {
        padding: 10px;
    }

    .table-responsive {
        overflow-x: auto;
    }

    .auth-container {
        padding: 15px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 577px) and (max-width: 768px) {
    .container-fluid {
        max-width: 720px;
    }

    .table-responsive {
        overflow-x: auto;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 769px) and (max-width: 992px) {
    .container-fluid {
        max-width: 960px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 993px) {
    .container-fluid {
        max-width: 1140px;
        margin: 0 auto;
    }
}

/* Mobile navigation menu */
@media (max-width: 576px) {
    .navbar-collapse {
        background-color: white;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 1000;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 10px;
    }

    .navbar-nav {
        flex-direction: column;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link {
        display: block;
        padding: 10px 15px;
        margin: 5px 0;
        text-align: center;
    }

    .mobile-logout {
        display: block;
    }

    .desktop-logout {
        display: none;
    }
}

@media (min-width: 577px) {
    .mobile-logout {
        display: none;
    }

    .desktop-logout {
        display: block;
    }
}

/* Table responsiveness */
@media (max-width: 768px) {
    .table th,
    .table td {
        white-space: nowrap;
    }

    .table-container {
        margin: 15px 0;
    }
}