/* Reset básico */
* {
  box-sizing: border-box; /* Garante que padding e border não aumentem o tamanho total dos elementos */
  margin: 0;              /* Remove margens padrão */
  padding: 0;             /* Remove preenchimentos padrão */
}

body {
  font-family: 'Segoe UI', sans-serif; /* Define a fonte principal da interface */
  display: flex;                       /* Usa flexbox para estruturar layout principal */
  min-height: 100vh;                   /* Garante que o body ocupe pelo menos toda a altura da tela */
  background-color: var(--bg);
  color: var(--text);
}

/* Tema claro / escuro via variáveis */
:root{
  --bg: #fffaf7;
  --text: #2b2b2b;
  --muted: #6b7280;
  --primary: #e74c3c; /* tomato / brand */
  --primary-hover: #d6452e;
  --card-bg: #ffffff;
  --surface: #fff5f2;
  --accent: #ff7a45;
  --border: rgba(0,0,0,0.08);
  --success-bg: #e6f9ef;
  --success-text: #067a45;
  --warning-bg: #fff7e6;
  --warning-text: #7a5400;
  --error-bg: #fff0f0;
  --error-text: #912020;
}

[data-theme="dark"]{
  --bg: #071018;
  --text: #e6eef8;
  --muted: #9aa6b2;
  --primary: #ff8a65; /* warm accent */
  --primary-hover: #ff7043;
  --card-bg: #0f1720;
  --surface: #081018;
  --accent: #ff8a65;
  --border: rgba(255,255,255,0.06);
  --success-bg: rgba(45, 110, 73, 0.18);
  --success-text: #a6ecd0;
  --warning-bg: rgba(200,140,40,0.12);
  --warning-text: #ffd79a;
  --error-bg: rgba(160,40,40,0.12);
  --error-text: #ffb4b4;
}

/* Tabela com cabeçalho fixo */
th {
  position: sticky;       /* Cabeçalho "gruda" no topo ao rolar */
  top: 0;                 /* Define que ficará no topo */
  background-color: var(--card-bg); /* Cor de fundo do cabeçalho */
  z-index: 2;             /* Garante que fique sobre outras camadas */
}

tr {
  border-bottom: 1px solid var(--border); /* Linha divisória entre linhas da tabela */
}

/* Sidebar */
.sidebar {
  width: 240px;                    /* Largura fixa */
  background-color: var(--card-bg);         /* Fundo da sidebar */
  padding: 2rem 1rem;             /* Espaçamento interno */
  border-right: 1px solid var(--border);   /* Borda divisória à direita */
  display: flex;                  /* Estrutura flexível em coluna */
  flex-direction: column;
  justify-content: space-between; /* Distribui conteúdo com espaço entre eles */
}

.sidebar h2 {
  color: var(--primary);               /* Cor do título */
  font-size: 1.5rem;            /* Tamanho da fonte */
  margin-bottom: 2rem;         /* Espaçamento abaixo */
  text-align: center;          /* Centraliza o texto */
}

ul {
  list-style: none; /* Remove os marcadores de lista */
  padding: 0;
  margin: 0;
}

.sidebar a {
  display: flex;                   /* Ícone e texto lado a lado */
  align-items: center;            /* Alinha verticalmente */
  gap: 12px;                      /* Espaço entre ícone e texto */
  padding: 0.75rem 1rem;          /* Espaçamento interno */
  margin-bottom: 0.5rem;          /* Espaço inferior entre links */
  border-radius: 8px;             /* Cantos arredondados */
  color: var(--text);                    /* Cor do texto */
  text-decoration: none;         /* Remove sublinhado */
  font-weight: 500;              /* Peso da fonte */
  transition: background 0.2s, color 0.2s; /* Animação de transição suave */
}

.sidebar a i {
  font-size: 18px;     /* Tamanho do ícone */
  color: var(--primary);      /* Cor padrão */
  transition: color 0.2s; /* Transição de cor suave */
}

  .sidebar a:hover {
  background-color: var(--surface); /* Cor de fundo ao passar o mouse */
  color: var(--primary);            /* Cor do texto ao passar o mouse */
}
.sidebar a:hover i {
  color: var(--accent); /* Cor do ícone ao passar o mouse */
}

.sidebar a.active i {
  color: var(--card-bg); /* Ícone no ativo */
}

.user {
  font-size: 0.85rem;            /* Tamanho menor de texto */
  color: var(--muted);                   /* Cinza claro */
  padding: 1rem;                 /* Espaço interno */
  border-top: 1px solid rgba(0,0,0,0.06);   /* Linha superior */
  margin-top: auto;             /* Empurra para o final da sidebar */
  text-align: left;
  line-height: 1.4;             /* Altura da linha */
}

/* Foto do usuário (exibe apenas em desktop) */
.user-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 0 0.6rem 0;
}

@media (max-width: 768px) {
  .user-photo { display: none; }
}

/* Centro para formulários de cadastro */
.form-section {
  display: flex;
  justify-content: center; /* centraliza horizontalmente */
  align-items: flex-start;
  padding: 1rem 0;
}

/* Em telas maiores, centraliza verticalmente também */
@media (min-width: 1024px) {
  .form-section { align-items: center; min-height: calc(100vh - 120px); }
}

/* Garante que o card mantenha seu tamanho ao ser centralizado */
.form-card, .product-form { margin: 0; }

/* Ajuste de largura dos formulários para responsividade */
@media (min-width: 1024px) {
  .product-form,
  .form-card {
    min-width: 400px; /* largura mínima igual para os formulários */
    max-width: 600px; /* evita ficar muito largo em telas grandes */
  }
}

  /* Mobile sidebar: escondido por padrão e toggle */
  .sidebar-toggle { display: none; }
  .sidebar-overlay { display: none; }

  @media (max-width: 768px) {
    .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      width: 240px;
      transform: translateX(-110%);
      transition: transform .25s ease;
      z-index: 1100;
    }

    body.sidebar-open .sidebar { transform: translateX(0); }

    .sidebar-toggle {
      display: inline-flex;
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 1200;
      background: var(--card-bg);
      color: var(--text);
      border: none;
      padding: 8px 10px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.12);
      cursor: pointer;
      align-items: center;
      gap: 6px;
    }

    .theme-toggle {
      display: inline-flex;
      position: fixed;
      top: 12px;
      right: 12px;
      z-index: 1200;
      background: var(--card-bg);
      color: var(--text);
      border: none;
      padding: 8px;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.12);
      cursor: pointer;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 16px;
    }


  /* Theme toggle shown on desktop too (fixed in top-right) */
.theme-toggle {
  display: inline-flex;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1300;
  background: var(--card-bg);
  color: var(--text);
  border: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 16px;
}

    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.35);
      z-index: 1090;
    }

    body.sidebar-open .sidebar-overlay { display: block; }
  }

/* Área principal */
.main-content {
  flex-grow: 1;       /* Ocupa o restante da tela */
  padding: 2rem;      /* Espaçamento interno */
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.main-content h1 {
  font-size: 1.8rem;       /* Título grande */
  margin-bottom: 0.25rem;   /* Espaço abaixo */
}

#subfrase {
  font-size: 1rem;  /* Tamanho padrão */
  color: var(--muted);      /* Cinza escuro */
}

.section-title {
  margin: 2rem 0 0.5rem;
  font-size: 1.4rem;
}

.section-description {
  margin-bottom: 1rem;
  color: var(--muted);
}

.linha-separadora {
  border: none;
  border-top: 1px solid rgba(0,0,0,0.06);  /* Linha superior */
  margin: 1rem 0 1.5rem;       /* Margens verticais */
}

/* Filtros */
.filters {
  display: flex;        /* Layout flexível */
  flex-wrap: wrap;      /* Quebra em várias linhas se necessário */
  gap: 1rem;            /* Espaço entre filtros */
  margin-bottom: 2rem;
}

.filters select,
.filters input[type="date"],
.filters input[type="text"] {
  padding: 0.5rem 0.75rem;   /* Espaçamento interno */
  border: 1px solid rgba(0,0,0,0.12);    /* Borda sutil */
  border-radius: 6px;        /* Arredondamento */
  font-size: 0.95rem;
}

.input-icon {
  position: relative; /* Permite posicionar ícone dentro do input */
}

.input-icon i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%); /* Centraliza verticalmente */
  color: var(--muted);
}

.input-icon input {
  padding-left: 2rem; /* Espaço para o ícone */
}

.fas.fa-search {
  position: sticky; 
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Tabela */
table {
  width: 100%;
  background: var(--card-bg);
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Sombra leve */
}

th, td {
  padding: 1rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0,0,0,0.06); /* Linha inferior */
}

th {
  background-color: var(--surface);
  font-weight: 600;
  color: var(--text);
}

/* Status */
.status {
  padding: 0.35rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: bold;
  display: inline-block;
}

.entregue {
  background-color: var(--success-bg);
  color: var(--success-text);
}

.preparando {
  background-color: var(--warning-bg);
  color: var(--warning-text);
}

.status.entregue { color: var(--success-text); }
.status.preparacao { color: var(--warning-text); }

/* Produto */
.produto {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.produto img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* Botão de atualização */
.refresh-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
}

/* Rodapé */
.footer {
  display: flex;
  justify-content: center;
  padding: 1rem 0 0;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--primary);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.95rem;
  padding: 0.7rem 1rem;
  transition: all 0.2s ease;
}

.footer a i {
  color: var(--primary);
}

.footer a:hover {
  color: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Formulário de produto */
.product-form,
.form-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 400px;
  background-color: var(--card-bg);
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  font-size: 1.4rem;
  font-weight: bold;
}

.product-form input,
.product-form select,
.form-card input,
.form-card select,
.product-form button,
.form-card button {
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.product-form button,
.form-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background-color: var(--primary);
  color: var(--card-bg);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease; /* Transição suave */
}

.product-form button:hover,
.form-card button:hover {
  background-color: var(--primary-hover);
}

.product-list {
  list-style: none;
  margin-top: 1rem;
  padding: 0;
}

.product-list li {
  background: var(--card-bg);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.product-list img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
}

/* Tela de usuários */
.main-content {
  flex-grow: 1;
  padding: 30px;
}

h2 {
  font-size: 2rem;
  margin-top: 1;
  padding: 2rem;
}

.form-card {
  background: var(--card-bg);
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
  margin-bottom: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.form-card label {
  display: block;
  margin-top: 10px;
  font-size: 1.3rem;
  font-weight: bold;
}

.form-card input,
.form-card select {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.form-card button {
  margin-top: 15px;
  width: 100%;
  padding: 0.7rem 1rem;
  background: var(--primary);
  color: var(--card-bg);
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s ease; /* Transição suave */
}
button:hover {
  transform: scale(1.05); /* Aumenta 5% ao passar o mouse */
}

.user-list {
  list-style: none;
  padding-left: 0;
}

.user-list li {
  background: var(--card-bg);
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}
/* Mensagens de formulário (sucesso / erro) */
.form-message {
  margin-top: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  font-size: 1rem;
  display: none;
}
.form-message.success {
  background-color: var(--success-bg); /* verde claro */
  color: var(--success-text);
  border: 1px solid rgba(6,95,70,0.08);
  display: block;
}
.form-message.error {
  background-color: var(--error-bg); /* vermelho claro */
  color: var(--error-text);
  border: 1px solid rgba(153,27,27,0.08);
  display: block;
}
/* fim */