table {
width: 100%;
border-collapse: collapse;
table-layout: auto; /* colunas se ajustam automaticamente */
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(106, 13, 173, 0.1);
overflow: hidden;
word-wrap: break-word; /* permite quebrar texto longo */
}

th {
white-space: nowrap;
overflow-x: auto;
}

/* Scroll individual para células específicas */
.scrollable {
max-width: 150px;
white-space: nowrap;
overflow-x: auto;
}

.scrollable::-webkit-scrollbar {
height: 8px;
}

.scrollable::-webkit-scrollbar-track {
background: #cd8df4;
}

.scrollable::-webkit-scrollbar-thumb {
background-color: #fff;
border-radius: 4px;
border: 2px solid #eee;
}

/* Botão Voltar */
.btn-table {
text-align: center;
margin-top: 30px;
width: 100%;
}

.btn-table a {
display: inline-block;
padding: 12px 32px;
background: #cd8df4;
color: #fff;
font-weight: 700;
font-size: 1.1rem;
border-radius: 40px;
text-decoration: none;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
transition: background 0.4s ease, box-shadow 0.4s ease;
cursor: pointer;
user-select: none;
}

.btn-table a:hover,
.btn-table a:focus {
background-color: #b672e0;
outline: none;
}

/* Cabeçalho */
thead th {
padding: 14px 12px;
font-weight: 700;
text-align: left;
color: #fff;
background: #cd8df4;
user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: 'Open Sauce One', sans-serif;
}

/* Células */
tbody td {
padding: 12px 10px;
vertical-align: middle;
font-size: 0.95rem;
color: #444;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
font-family: 'Open Sauce One', sans-serif;
}

/* Links de ação */
tbody td a {
background: #cd8df4;
color: #fff;
padding: 6px 14px;
border-radius: 20px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s ease;
}

tbody td a:hover {
background-color: #b672e0;
}

/* Scroll horizontal em telas menores */
@media (max-width: 900px) {
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}

/* Tabelas específicas */
.tabela-usuarios th:nth-child(1), td:nth-child(1) { width: 8%; min-width: 50px; text-align: center;}
.tabela-usuarios th:nth-child(2), td:nth-child(2) { width: 8%; min-width: 50px; text-align: center;}
.tabela-usuarios th:nth-child(3), td:nth-child(3) { width: 20%; min-width: 100px; }
.tabela-usuarios th:nth-child(4), td:nth-child(4) { width: 25%; min-width: 120px; }
.tabela-usuarios th:nth-child(5), td:nth-child(5) { width: 15%; min-width: 80px; }
.tabela-usuarios th:nth-child(6), td:nth-child(6) { width: 8%; min-width: 50px; text-align: center;}
.tabela-usuarios th:nth-child(7), td:nth-child(7) { width: 16%; min-width: 90px; }
.tabela-usuarios th:nth-child(8), td:nth-child(8) { width: 10%; min-width: 60px; text-align: center;}
.tabela-usuarios th:nth-child(9), td:nth-child(9) { width: 10%; min-width: 60px; text-align: center;}

.tabela-produtos th:nth-child(1), td:nth-child(1) { width: 8%; min-width: 50px; text-align: center;}
.tabela-produtos th:nth-child(2), td:nth-child(2) { width: 12%; min-width: 80px; }
.tabela-produtos th:nth-child(3), td:nth-child(3) { width: 10%; min-width: 80px; }
.tabela-produtos th:nth-child(4), td:nth-child(4) { width: 20%; min-width: 110px; white-space: normal; }
.tabela-produtos th:nth-child(5), td:nth-child(5) { width: 12%; min-width: 90px; text-align: center; }
.tabela-produtos th:nth-child(6), td:nth-child(6) { width: 6%; min-width: 50px; text-align: center; }
.tabela-produtos th:nth-child(7), td:nth-child(7) { width: 12%; min-width: 90px; }
.tabela-produtos th:nth-child(8), td:nth-child(8) { width: 6%; min-width: 60px; text-align: center; }
.tabela-produtos th:nth-child(9), td:nth-child(9) { width: 6%; min-width: 60px; text-align: center; }
.tabela-produtos th:nth-child(10), td:nth-child(10) { width: 7%; min-width: 60px; text-align: center; }
.tabela-produtos th:nth-child(11), td:nth-child(11) { width: 7%; min-width: 60px; text-align: center; }

.tabela-produtos tbody td img {
max-width: 100px;
max-height: 80px;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(123, 60, 255, 0.15);
display: block;
margin: 0 auto;
}

@media (max-width: 768px) {
.tabela-produtos th:nth-child(5),
table td:nth-child(5) {
width: 80px;
max-width: 80px;
}
.tabela-produtos tbody td img {
max-width: 70px;
max-height: 60px;
}
}

/* Tabela de compras */
.tabela-compras th:nth-child(1),
.tabela-compras td:nth-child(1) { width: 10%; min-width: 60px; text-align: center; }
.tabela-compras th:nth-child(2),
.tabela-compras td:nth-child(2) { width: 12%; min-width: 80px; }
.tabela-compras th:nth-child(3),
.tabela-compras td:nth-child(3) { width: 14%; min-width: 100px; text-align: center; }
.tabela-compras th:nth-child(4),
.tabela-compras td:nth-child(4) { width: 12%; min-width: 80px; text-align: right; }
.tabela-compras th:nth-child(5),
.tabela-compras td:nth-child(5) { width: 12%; min-width: 80px; text-align: center; }
.tabela-compras th:nth-child(6),
.tabela-compras td:nth-child(6) { width: 12%; min-width: 80px; text-align: center; }
.tabela-compras th:nth-child(7),
.tabela-compras td:nth-child(7) { width: 14%; min-width: 90px; text-align: right; }
.tabela-compras th:nth-child(8),
.tabela-compras td:nth-child(8) { width: 14%; min-width: 70px; text-align: center; }

/* Tabela do carrinho */
.tabela-carrinho tbody td img {
width: 100%;
max-width: 100px;
height: auto;
max-height: 80px;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(123, 60, 255, 0.15);
display: block;
margin: 0 auto;
}

@media (max-width: 768px) {
.tabela-carrinho tbody td img {
max-width: 70px;
max-height: 60px;
}
}

/* Wrapper para tabelas responsivas */
.table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.table-wrapper table {
width: 100%;
min-width: 500px;
}

@media (max-width: 768px) {
.table-wrapper table {
width: 100%;
min-width: unset;
}

table th,
table td {
font-size: 0.85rem;
white-space: normal;
}

.tabela-carrinho td img {
max-width: 60px;
max-height: 60px;
}
}

/* Centralização */
table th,
table td {
text-align: center;
vertical-align: middle;
}

@media (max-width: 768px) {
  .tabela-produtos th,
  .tabela-produtos td {
    min-width: unset !important;
    white-space: normal !important;
  }

  .table-wrapper {
    overflow-x: auto !important;
  }
}