/* assets/styles.css */

/* Importa o Bootstrap via CDN (caso prefira, pode colocar essa tag no header.php também) */
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');

/* Estilos para o menu superior utilizando classes Bootstrap */
.top-menu {
    background-color: #343a40;
}
.top-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.top-menu ul li {
    margin-right: 20px;
}
.top-menu ul li a {
    color: #fff;
    text-decoration: none;
}
.top-menu ul li a:hover {
    text-decoration: underline;
}

/* Espaçamento sutil para a tabela: simula linhas separadas com transparência */
.table-custom {
    border-collapse: separate;
    border-spacing: 0 5px;
}

/* Product status styling */
.table-custom .status-pendente {
    background-color: #f8f9fa;
}
.table-custom .status-green {
    background-color: #d4edda;
}
.table-custom .status-orange {
    background-color: #fff3cd;
}

.table-custom .status-red {
    background-color: #f8d7da;
}

.table-custom .nome-produto {
    font-weight: 500;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: clip;
    max-width: 500px;
    line-height: 1.2;
}

/* Action buttons */
.action-buttons {
    display: flex;
    gap: 5px;
}

.status-button {
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 5px;
}

.delete-button {
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 5px;
}

.delete-icon {
    color: #fff;
    font-weight: bold;
}

/* Estilos para o formulário de cadastro */
.product-form-container {
    max-width: 600px;
    margin: 20px auto;
}
.product-form-container h2 {
    text-align: center;
}
.product-form-container .form-group {
    margin-bottom: 15px;
}
.product-form-container label {
    display: block;
    margin-bottom: 5px;
}
.product-form-container input[type="text"] {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

/* Mensagens de erro e sucesso */
.error-message {
    color: red;
}
.success-message {
    color: green;
}

/* Ajustes para container das views */
.login-container, .product-list-container, .product-management-container {
    padding: 20px;
}

/* Personalização de linhas da tabela com espaçamento sutil */
.table-custom {
    border-collapse: separate;
    border-spacing: 0 5px;
}