/* Responsividade Geral */
:root {
    --primary-color: #23939d;
    --secondary-color: #1b747c;
    --text-color: #333;
    --background-color: #fff;
    --shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* Container Responsivo */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Grid System */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* Login Responsivo */
.container-login {
    width: 90%;
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
}

/* Formulários Responsivos */
form {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

input, select, textarea {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Tabelas Responsivas */
/* Comentado para evitar conflito com style.css
.table-responsive {
    /* overflow-x: auto; */
    /* -webkit-overflow-scrolling: touch; */
}

/* .table-responsive table, table {
    min-width: 600px;
    width: 100%;
} */

/* .table-responsive th, .table-responsive td, th, td {
    color: #222 !important;
} */

/* @media (max-width: 600px) {
    .table-responsive table,
    table {
        min-width: unset;
        font-size: 0.95rem;
    }
    .table-responsive th, .table-responsive td,
    th, td {
        padding: 6px 4px;
        font-size: 0.95rem;
        color: #222 !important;
        background: #fff !important;
    }
    .table-responsive input[type="text"],
    input[type="text"] {
        font-size: 0.95rem;
        padding: 6px 4px;
        color: #222 !important;
        background: #f9f9f9 !important;
    }
}

.table-responsive th, .table-responsive td,
th, td {
    color: #222 !important;
} */

/* Botões Responsivos */
.btn {
    width: 100%;
    max-width: 200px;
    padding: 12px 20px;
    margin: 10px auto;
    display: block;
}

/* Media Queries */
/* Dispositivos móveis */
@media (max-width: 480px) {
    .container {
        padding: 10px;
    }

    .container-login {
        width: 95%;
        padding: 15px;
    }

    h1 {
        font-size: 1.5rem;
    }

    .btn {
        width: 100%;
    }

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

/* Tablets */
@media (min-width: 481px) and (max-width: 768px) {
    .container {
        width: 95%;
    }

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

/* Desktops pequenos */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        width: 90%;
    }

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

/* Desktops grandes */
@media (min-width: 1025px) {
    .container {
        width: 80%;
    }

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

/* Ajustes específicos para telas muito pequenas */
@media (max-width: 320px) {
    .container-login {
        padding: 10px;
    }

    input, select, textarea {
        padding: 8px;
    }

    .btn {
        padding: 8px 16px;
    }
}

/* Ajustes para orientação paisagem em dispositivos móveis */
@media (max-height: 480px) and (orientation: landscape) {
    .container-login {
        margin: 10px auto;
    }

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

/* Ajustes para telas de alta resolução */
@media (min-width: 1920px) {
    .container {
        max-width: 1800px;
    }

    body {
        font-size: 1.1rem;
    }
}

/* Ajustes para modo escuro do sistema */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #1a1a1a;
        --text-color: #fff;
    }

    body {
        background-color: var(--background-color);
        color: var(--text-color);
    }

    input, select, textarea {
        background-color: #2d2d2d;
        color: var(--text-color);
        border-color: #404040;
    }
}