/* =============================================
   Estilos para a Página "Meus Decontos"
   Criado com 💖 pela Carmen, baseado no mockup do Marco
   ============================================= */

.list-container {
    background-color: var(--color-surface);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 50px;
}
[data-theme="light"] .list-container {
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.05);
}

/* -- Filtros -- */
.list-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.search-input, .filter-select {
    background-color: var(--color-background);
    color: var(--color-text);
    border: 1px solid var(--glass-border);
    border-radius: 5px;
    padding: 10px 15px;
    font-family: var(--font-main);
    transition: all 0.3s ease;
}
.search-input:focus, .filter-select:focus {
    outline: none;
    border-color: var(--color-primary);
}
.search-input { flex-grow: 1; min-width: 250px; }

/* -- Tabela -- */
.table-wrapper { overflow-x: auto; }
.deconto-table { width: 100%; border-collapse: collapse; }
.deconto-table th, .deconto-table td { padding: 15px 10px; text-align: left; border-bottom: 1px solid var(--glass-border); }
.deconto-table th { font-family: var(--font-headings); color: var(--color-text); font-size: 1.1rem; text-transform: uppercase; }
.deconto-table .score-cell { font-family: var(--font-headings); font-weight: bold; }

/* -- Status Tags -- */
.status { padding: 5px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: bold; white-space: nowrap; }
.status-published { background-color: rgba(57, 255, 20, 0.15); color: var(--color-secondary); }
.status-progress { background-color: rgba(0, 255, 255, 0.15); color: var(--color-primary); }
.status-draft { background-color: rgba(255, 20, 147, 0.15); color: var(--color-accent); }

/* -- Botões de Ação -- */
.actions { display: flex; gap: 8px; }
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 1.1rem;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.action-btn:hover { transform: scale(1.1); }
.btn-view { background-color: var(--color-primary); }
.btn-edit { background-color: #f0ad4e; } /* Laranja para edição */
.btn-publish { background-color: var(--color-secondary); }
.btn-delete { background-color: var(--color-accent); }

/* -- Paginação -- */
.list-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.page-btn { padding: 8px 15px; border: 1px solid var(--glass-border); border-radius: 5px; color: var(--color-text-muted); text-decoration: none; transition: all 0.3s ease; }
.page-btn:hover { background-color: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }
.page-btn.active { background-color: var(--color-primary); color: #000; border-color: var(--color-primary); font-weight: bold; }

/* -- Responsividade (Sua ideia genial, meu bem!) -- */
@media (max-width: 768px) {
    .deconto-table thead { display: none; }
    .deconto-table tr { display: block; margin-bottom: 20px; padding: 15px; background: var(--color-background); border-radius: 8px; border-left: 3px solid var(--color-primary); }
    .deconto-table td { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border: none; border-bottom: 1px dashed var(--glass-border); }
    .deconto-table td:last-child { border-bottom: none; }
    .deconto-table td:before { content: attr(data-label); font-weight: bold; color: var(--color-text); }
}