/* Estilos gerais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Garante que o padding e a borda estejam incluídos na largura total */
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* Impede a rolagem horizontal */
    overflow-y: auto;
    /* Permite rolagem vertical */
}

/* Container principal */
.container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow-y: auto;
    /* Permite rolagem dentro do container, se necessário */
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Botão de Logout */
#logoutButton {
    float: right;
    /* Alinha o botão à direita */
    margin-bottom: 20px;
    background-color: #ff6358;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

#logoutButton:hover {
    background-color: #e05246;
}

/* Formulário */
form {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    color: #555;
}

input[type="text"],
textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
textarea:focus {
    border-color: #ff6358;
    outline: none;
}

button {
    background-color: #ff6358;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #e05246;
}

/* Mensagens de Feedback */
.feedback-message {
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
}

.feedback-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.feedback-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Tabela */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

th,
td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

thead th {
    background-color: #f9f9f9;
    color: #333;
    font-weight: bold;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

tbody tr:hover {
    background-color: #f1f1f1;
    transition: background-color 0.3s ease;
}

/* Botões de Ação na Tabela */
button.action-button {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

button.action-button.accept {
    background-color: #28a745;
    color: white;
}

button.action-button.accept:hover {
    background-color: #218838;
}

button.action-button.reject {
    background-color: #dc3545;
    color: white;
}

button.action-button.reject:hover {
    background-color: #bd2130;
}

button.action-button.in-transit {
    background-color: #ffc107;
    color: #333;
}

button.action-button.in-transit:hover {
    background-color: #e0a800;
}

button.action-button.delivered {
    background-color: #17a2b8;
    color: white;
}

button.action-button.delivered:hover {
    background-color: #138496;
}

/* Rodapé de links (se aplicável) */
.footer-links {
    margin-top: 20px;
    text-align: center;
}

.footer-links a {
    color: #555;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #ff6358;
    text-decoration: underline;
}
/* Para telas menores que 768px (tablets e smartphones) */
@media (max-width: 767px) {
    .container {
        margin: 10px;
        padding: 15px;
    }

    h1 {
        font-size: 2em;
        margin-bottom: 15px;
    }

    #logoutButton {
        float: none;
        display: block;
        margin-bottom: 15px;
        text-align: center;
    }

    form#criarPedidoForm h2 {
        font-size: 1.5em;
        margin-bottom: 10px;
    }

    label {
        font-size: 1em;
        margin-top: 8px;
    }

    input[type="text"],
    textarea,
    button {
        font-size: 1em;
        padding: 8px 15px;
        margin-bottom: 10px; /* Adicionar margem inferior aos inputs em telas menores */
    }

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    th,
    td {
        padding: 8px;
        font-size: 0.9em; /* Reduzir um pouco a fonte nas células da tabela */
    }

    /* Estilos específicos para os botões de ação na tabela em telas menores */
    td button.action-button {
        display: block; /* Exibir botões em linhas separadas */
        width: 100%;
        margin-bottom: 5px;
        text-align: center;
    }
}

/* Para telas ainda menores (smartphones - até 480px) */
@media (max-width: 480px) {
    h1 {
        font-size: 1.5em;
        margin-bottom: 10px;
    }

    form#criarPedidoForm h2 {
        font-size: 1.2em;
    }

    label {
        font-size: 0.9em;
    }

    input[type="text"],
    textarea,
    button {
        font-size: 0.9em;
        padding: 6px 12px;
    }

    th,
    td {
        padding: 6px;
        font-size: 0.8em;
    }
}
/* Tabelas adaptativas para telas menores */
@media (max-width: 991px) {
    table.table thead {
      display: none;
    }
  
    table.table, 
    table.table tbody, 
    table.table tr, 
    table.table td {
      display: block;
      width: 100%;
    }
  
    table.table tr {
      margin-bottom: 1rem;
      border: 1px solid #ddd;
      padding: 0.5rem;
    }
  
    table.table td {
      text-align: right;
      position: relative;
      padding-left: 50%;
      white-space: normal;
    }
  
    table.table td::before {
      content: attr(data-label);
      position: absolute;
      left: 1rem;
      width: 45%;
      padding-right: 1rem;
      font-weight: bold;
      text-align: left;
    }
  }
  /* Responsividade para tabelas com data-label */
@media (max-width: 991px) {
    table.table thead {
      display: none;
    }
  
    table.table,
    table.table tbody,
    table.table tr,
    table.table td {
      display: block;
      width: 100%;
    }
  
    table.table tr {
      margin-bottom: 1rem;
      border: 1px solid #ddd;
      padding: 0.5rem;
    }
  
    table.table td {
      text-align: right;
      position: relative;
      padding-left: 50%;
      white-space: normal;
      border: none;
      border-bottom: 1px solid #eee;
    }
  
    table.table td::before {
      content: attr(data-label);
      position: absolute;
      left: 1rem;
      width: 45%;
      padding-right: 1rem;
      font-weight: bold;
      text-align: left;
      white-space: nowrap;
    }
  }
  .table-wrapper {
    width: 100%;
    overflow-x: auto;
  }

  /* === RESPONSIVIDADE DAS TABELAS === */

/* Desktop (sem scroll lateral forçado) */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
  }
  
  /* Tabelas adaptativas para mobile e tablet (até 991px) */
  @media (max-width: 991px) {
    table.table thead {
      display: none;
    }
  
    table.table,
    table.table tbody,
    table.table tr,
    table.table td {
      display: block;
      width: 100%;
    }
  
    table.table tr {
      margin-bottom: 1rem;
      border: 1px solid #ddd;
      padding: 0.5rem;
    }
  
    table.table td {
      text-align: right;
      position: relative;
      padding-left: 50%;
      white-space: normal;
      border: none;
      border-bottom: 1px solid #eee;
    }
  
    table.table td::before {
      content: attr(data-label);
      position: absolute;
      left: 1rem;
      width: 45%;
      padding-right: 1rem;
      font-weight: bold;
      text-align: left;
      white-space: nowrap;
    }
  
    /* Botões nas tabelas em telas menores */
    td button.action-button {
      display: block;
      width: 100%;
      margin-bottom: 5px;
      text-align: center;
    }
  }
  /* Botões de ação empilhados verticalmente */
td[data-label="Ações"] button {
    display: block;
    width: 100%;
    margin-bottom: 6px;
  }
  /* Expande o dashboard para telas maiores */
@media (min-width: 992px) {
    .container,
    .card,
    .main-content,
    .content {
      max-width: 100%;
      width: 100%;
    }
  
    .card {
      border-radius: 0;
      box-shadow: none;
    }
  }