@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* Definição das cores na raiz */
:root {
    --laranja: #fa7c23;
    --laranja-claro: #fcab71;
    --vermelho: #cb2807;
    --verde-escuro: #0c7425;
    --verde-claro: #79a86a;
    --dourado: #ddc174;
    --marrom: #682e18;
    --verde-musgo: #4b7e51;
    --bege: #eeedc5;
    --sidebar-background: #2c3e50;
    --sidebar-botões: #1c2b3a;
    --sidebar-hover: #435568;
}


/* Reset básico de estilos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;

}

/* Corpo e fundo */
body {
    background-color: var(--bege);
    color: black;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100vh;
}

/* Container principal para o layout */
.container {
    display: flex;
    width: 100%;
    height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 20%;
    background-color: var(--sidebar-botões);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
.sidebar h2{
    font-size: 24px;
    color: white;
}

/* Lista e itens da sidebar */
.sidebar ul {
    list-style: none;
    padding: 0;
    width: 100%;
}

.sidebar ul li {
    color: #fff;
    padding: 12px;
    cursor: pointer;
    margin: 10px 0;
    width: 100%;
    text-align: left;
    background-color: var(--sidebar-background);
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.sidebar ul li:hover {
    background-color: var(--sidebar-hover);
}

.card h3{
    color: black;
}

.card p{
    color: var(--botões)
}

.btn-saida {
    position: absolute; /* Faz o botão se posicionar de forma absoluta em relação à sidebar */
    bottom: 20px; /* Distância de 20px do fundo da sidebar */
    left: 20px; /* Distância de 20px da borda esquerda da sidebar */
    color: #fff;
    font-weight: 500;
    padding: 12px;
    cursor: pointer;
    width: auto; /* Ajusta a largura conforme o conteúdo */
    text-align: center;
    background-color: var(--sidebar-background);
    border-radius: 6px;
    border: none;
}

.btn-saida:hover {
    background-color: var(--sidebar-hover);
}


.btn-cliente{
    position: absolute; /* Faz o botão se posicionar de forma absoluta em relação à sidebar */
    bottom: 20px; /* Distância de 20px do fundo da sidebar */
    left: 150px; /* Distância de 20px da borda esquerda da sidebar */
    color: #fff;
    font-weight: 500;
    padding: 12px;
    cursor: pointer;
    width: auto; /* Ajusta a largura conforme o conteúdo */
    text-align: center;
    background-color: var(--laranja);
    border-radius: 6px;
    border: none;
}

.btn-cliente:hover {
    background-color: var(--laranja-claro);
}

/* Conteúdo darshboard */
.darshboard {
    margin: 2% 0;
    width: 80%; /* Ocupa os 80% restantes da tela */
    min-width: 1050px;
    display: flex;
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: flex-start; /* Alinha os itens ao topo */
    flex-direction: column;
    position: absolute;
    right: 0;
    text-align: center; /* Centraliza o texto de todos os elementos internos */
}

.darshboard h1 {
    text-align: center; /* Centraliza o texto dentro do h1 */
    width: 100%; /* Garante que o h1 ocupe toda a largura do seu contêiner */
}


/* Conteúdo pedidos */
#pedidos {
    margin: 2% 0;
    width: 80%; /* Ocupa 80% da largura */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinha os itens ao início */
    align-items: flex-start; /* Alinha os itens ao topo */
    position: absolute;
    right: 0; /* Posiciona à direita */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* Ajuste para os itens de pedidos */
#restaurant-orders div {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%; /* Garante que os itens ocupem toda a largura */
}

#restaurant-orders p {
    margin: 5px 0;
    font-size: 16px;
    color: #333;
}

#restaurant-orders button {
    background-color: var(--laranja);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#restaurant-orders button:hover {
    background-color: var(--laranja-claro);
}

#restaurant-orders button.excluir {
    background-color: red;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#restaurant-orders button.excluir:hover {
    background-color: darkred;
}

/* Conteúdo cardapio */
.cardapio {
    margin: 2% 0;
    width: 80%; /* Ocupa os 80% da tela após a sidebar */
    display: flex;
    justify-content: flex-start; /* Alinha os itens ao início */
    align-items: flex-start; /* Alinha os itens ao topo */
    flex-direction: column;
    position: absolute;
    right: 0;
}


/* Conteúdo configurações */
.configuracao {
    margin: 2% 0;
    width: 80%; /* Ocupa os 80% restantes da tela */
    display: flex;
    justify-content: flex-start; /* Alinha os itens ao início */
    align-items: flex-start; /* Alinha os itens ao topo */
    flex-direction: column;
    position: absolute;
    right: 0;
}


/* Estilo do conteúdo */
.content {
    display: block; /* Inicialmente, o conteúdo está oculto */
    width: 100%;
    text-align: center; /* Garante que o conteúdo esteja centralizado */
}

/* Estilo dos títulos */
h1 {
    font-size: 36px;
    color: var(--laranja);
    margin-bottom: 20px;
}

/* Estilo dos parágrafos */
p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--bege);
    margin-bottom: 20px;
}

/* Tabela */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table th,
table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--verde-musgo);
    font-weight:500 ;
}

table th {
    background-color: var(--verde-escuro);
    color: #fff;
}

table tr:nth-child(even) {
    background-color: var(--verde-claro);
}


.cards {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.card {
    background-color: var(--verde-musgo);
    color: white;
    padding: 20px;
    width: 200px;
    height: 120px;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 20px;
}

.card p{
    color: var(--bege);
    font-weight: bold;
    font-size: 1.2em;   
    align-items: center;
    justify-content: center;
    display: flex;
    text-align: center;
}

.chart {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.recent-activities table {
    width: 100%;
    border-collapse: collapse;
}

.recent-activities th, .recent-activities td {
    padding: 10px;
    border: 1px solid var(--botões);
}

.recent-activities th {
    background-color: var(--dourado);
    color: black;
}



canvas {
    justify-content: center;
    align-items: center;
    
    width: 90% !important;  /* Ajuste para que o gráfico ocupe toda a largura disponível */
    height: 500px !important; /* Ajuste a altura do gráfico */
}



.menu {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 30px;
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.menu h2 {
    text-align: center;
    font-size: 2em;
    color: #fa7c23;
    margin-bottom: 30px;
}
.header{
    padding-left: 20px;
}

.category {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.category h3 {
    font-size: 1.5em;
    color: #2c3e50;
    margin-bottom: 10px;
}

.menu-item {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.menu-item img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

.item-details {
    flex: 1;
}

.item-details h4 {
    font-size: 1.3em;
    color: #2c3e50;
    margin-bottom: 10px;
}

.item-details p {
    color: #34495e;
    margin-bottom: 10px;
}

.price {
    font-size: 1.2em;
    color: #e74c3c;
    margin-bottom: 10px;
}

.add-to-cart {
    background-color: #fa7c23;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.3s;
}

.add-to-cart:hover {
    background-color: #f39c12;
}


.config-item {
    margin-bottom: 15px;
}

.config-item label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.config-item input {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.photo-preview img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    margin-top: 10px;
}

.save-config {
    width: 100%;
    padding: 12px;
    background-color:var(--marrom);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

.save-settings:hover {
    background-color: var(--dourado);
}

.dias{
    width: 100%;
    display: flex;
}

.dias input{
    width: 20%;
    padding: 5px;
    margin: -5px 20px ;

}