/*D:\www\GEDService\PortalCliente\main\static\css\tables.css*/
.table-container {
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.table-responsive {
    overflow-x: auto;
}

table.table-striped {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    font-family: 'Roboto', sans-serif; /* Fonte Google */
}

/* Centralizar o conteúdo das células da tabela */
table.table-striped th, table.table-striped td {
    text-align: center; /* Centraliza o texto dentro das células */
    vertical-align: middle; /* Centraliza verticalmente */
}

table.table-striped th {
    background-color: #f5f5f5;
    color: #3c4043;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    user-select: none;
}

table.table-striped th.asc::after {
    content: "▲";
    font-size: 12px;
    position: absolute;
    right: 8px;
}

table.table-striped th.desc::after {
    content: "▼";
    font-size: 12px;
    position: absolute;
    right: 8px;
}

table.table-striped tbody tr:nth-child(even) {
    background-color: #fafafa;
}

table.table-striped tbody tr:hover {
    background-color: #f1f1f1;
}

table.table-striped tbody tr td {
    color: #3c4043;
    font-size: 12px; /* Ajusta o tamanho do texto das linhas para 12px */
}

.table-striped tbody tr td i.material-icons {
    font-size: 20px;
    color: #1a73e8;
    cursor: pointer;
    display: inline-block; /* Garante que o ícone seja tratado como bloco inline */
    text-align: center; /* Centraliza o ícone horizontalmente */
    width: 100%; /* Garante que o ícone ocupe toda a largura da célula */
}

.table-striped tbody tr td:last-child {
    text-align: center;
    position: relative;
}

.table-striped tbody tr td a[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 12px;
    z-index: 1;
}

.table-striped tbody tr td:last-child a {
    position: relative;
    display: inline-block;
}

.table-striped tbody tr td:last-child a[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 12px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s;
}

.table-striped tbody tr td:last-child a[data-tooltip]:hover::after {
    opacity: 1;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .table-container {
        padding: 10px;
    }

    table.table-striped th, table.table-striped td {
        padding: 6px;
    }

    table.table-striped {
        font-size: 10px;
    }
}

/* Estilo para tema dark */
body[data-theme="dark"] {
    background-color: #121212;
    color: #e0e0e0;
}

body[data-theme="dark"] .table-container {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

body[data-theme="dark"] table.table-striped th {
    background-color: #2c2c2c;
    color: #e0e0e0;
}

body[data-theme="dark"] table.table-striped tbody tr:nth-child(even) {
    background-color: #2a2a2a;
}

body[data-theme="dark"] table.table-striped tbody tr:hover {
    background-color: #333333;
}

.table-striped tbody tr td i.material-icons {
    font-size: 20px;
    color: #1a73e8;
    cursor: pointer;
}

.table-striped tbody tr td a[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 12px;
    z-index: 1;
}