/* =======================
   Estilos da Tabela de Pedidos
======================= */

/* Wrapper da tabela */
.table-wrapper-tutor {
    overflow-x: auto;
    scrollbar-color: #F36E46 #e0e0e0;
    scrollbar-width: thin;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(63,81,181,0.06);
    margin-bottom: 20px;
}

/* Estilo para a tabela de pedidos */
.tabela-pedidos-tutor {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1100px;
}

/* Estilos para as células da tabela */
.tabela-pedidos-tutor th, .tabela-pedidos-tutor td {
    padding: 14px 18px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    font-size: 15px;
    background: #fff;
}

/* Estilo para o cabeçalho da tabela */
.tabela-pedidos-tutor th {
    background: #4C5B69;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Estilo para as células do corpo da tabela */
.tabela-pedidos-tutor td {
    white-space: nowrap;
}

/* Estilo para a célula 'Serviço' */
.tabela-pedidos-tutor td[data-label="Serviço"] {
    min-width: 250px;
    max-width: 350px;
    white-space: normal;
}

/* Estilo para as linhas alternadas da tabela */
.tabela-pedidos-tutor tr:nth-child(even) td {
    background: #f7f8fa;
}

/* =======================
   Estilos dos Status
======================= */

/* Estilo base para os status */
.status-tutor {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 14px;
}

/* Estilos específicos para cada status */
.status-pendente {
    background: #ffb300;
    color: #fff;
}

.status-aguardando-tutor {
    background: #ffb300 !important;
    color: #fff !important;
}

.status-em-andamento {
    background: #ff9800;
    color: #fff;
}

.status-finalizado {
    background: #43a047;
    color: #fff;
}

.status-cancelado {
    background: #e53935;
    color: #fff;
}

/* Estilos para o status de pagamento */
.status-pagamento-tutor {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 14px;
}

.status-pagamento-pendente {
    background: #ffb300;
    color: #fff;
}

.status-pagamento-pago {
    background: #43a047;
    color: #fff;
}

/* =======================
   Estilos de Anexo e Paginação
======================= */

/* Link para o anexo NFS-e */
.anexo-nfs-link {
    color: #fff;
    background: #4C5B69;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
}

/* Hover para o link de anexo */
.anexo-nfs-link:hover {
    background: #283593;
}

/* Estilos para a paginação */
.paginacao-tutor {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.paginacao-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #fff;
    color: #F36E46;
    border: 2px solid #F36E46;
    border-radius: 50%;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    box-shadow: 0 1px 4px rgba(63,81,181,0.07);
}

/* Paginação - Ativa e hover */
.paginacao-btn.paginacao-ativo, .paginacao-btn:hover {
    background: #F36E46;
    color: #fff;
}

/* Paginação - Botões 'Anterior' e 'Próxima' */
.paginacao-btn.paginacao-anterior, .paginacao-btn.paginacao-proximo {
    font-size: 20px;
    background: #f1f1f1;
    color: #F36E46;
    border: 1.5px solid #F36E46;
}

/* =======================
   Estilos de Barra de Rolagem
======================= */

/* Estilos para a barra de rolagem */
.table-wrapper-tutor::-webkit-scrollbar {
    height: 8px;
}

.table-wrapper-tutor::-webkit-scrollbar-thumb {
    background: #F36E46;
    border-radius: 8px;
}

.table-wrapper-tutor::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 8px;
}

/* =======================
   Estilos Responsivos (Mobile)
======================= */

/* Ajustes para telas menores que 1100px */
@media (max-width: 1100px) {
    .tabela-pedidos-tutor {
        min-width: 900px;
        font-size: 13px;
    }

    .tabela-pedidos-tutor th, .tabela-pedidos-tutor td {
        padding: 10px 8px;
    }
}

/* Ajustes para telas menores que 900px */
@media (max-width: 900px) {
    .tabela-pedidos-tutor {
        min-width: 700px;
        font-size: 12px;
    }

    .paginacao-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* Ajustes para telas menores que 600px */
@media (max-width: 600px) {
    .table-wrapper-tutor {
        min-width: 100vw;
    }

    .tabela-pedidos-tutor {
        min-width: 650px;
        font-size: 11px;
    }
}