/* ==========================================================
   PORTAL DAS JORNADAS CIENTÍFICAS
   Universidade Jean Piaget de Angola
   Ficheiro: tables.css
   ========================================================== */

/*==========================================================
  RESPONSIVO
==========================================================*/

.table-responsive{

    width:100%;

    overflow-x:auto;

    border-radius:var(--radius);

}

/*==========================================================
  TABELA
==========================================================*/

.table{

    width:100%;

    border-collapse:collapse;

    background:#FFF;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

}

/*==========================================================
  CABEÇALHO
==========================================================*/

.table thead{

    background:var(--gradient-primary);

}

.table thead th{

    padding:18px 20px;

    color:#FFF;

    font-size:.95rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.5px;

    border:none;

    white-space:nowrap;

}

/*==========================================================
  CORPO
==========================================================*/

.table tbody td{

    padding:18px 20px;

    color:var(--text);

    border-bottom:1px solid var(--border);

    vertical-align:middle;

}

.table tbody tr{

    transition:.3s;

}

.table tbody tr:hover{

    background:#F9F9F9;

}

.table tbody tr:last-child td{

    border-bottom:none;

}

/*==========================================================
  LISTAGEM
==========================================================*/

.table-striped tbody tr:nth-child(even){

    background:#FCFCFC;

}

.table-hover tbody tr:hover{

    background:rgba(200,154,50,.08);

}

/*==========================================================
  BORDAS
==========================================================*/

.table-bordered{

    border:1px solid var(--border);

}

.table-bordered th,

.table-bordered td{

    border:1px solid var(--border);

}

/*==========================================================
  ESTADOS
==========================================================*/

.table-success{

    background:#E8F5E9;

}

.table-warning{

    background:#FFF8E1;

}

.table-danger{

    background:#FDECEC;

}

.table-info{

    background:#E8F4FD;

}

/*==========================================================
  BADGES
==========================================================*/

.badge{

    display:inline-block;

    padding:8px 14px;

    border-radius:50px;

    font-size:.80rem;

    font-weight:600;

    text-transform:uppercase;

}

.badge-success{

    background:#198754;

    color:#FFF;

}

.badge-warning{

    background:#FFC107;

    color:#212529;

}

.badge-danger{

    background:#DC3545;

    color:#FFF;

}

.badge-info{

    background:#0DCAF0;

    color:#FFF;

}

.badge-secondary{

    background:#6C757D;

    color:#FFF;

}

/*==========================================================
  BOTÕES DE AÇÃO
==========================================================*/

.table-actions{

    display:flex;

    gap:8px;

    align-items:center;

}

.table-actions .btn{

    width:38px;

    height:38px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    border:none;

    transition:.3s;

}

.table-actions .btn i{

    font-size:1rem;

}

.btn-view{

    background:#0DCAF0;

    color:#FFF;

}

.btn-edit{

    background:#FFC107;

    color:#212529;

}

.btn-delete{

    background:#DC3545;

    color:#FFF;

}

.btn-view:hover,

.btn-edit:hover,

.btn-delete:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}

/*==========================================================
  PAGINAÇÃO
==========================================================*/

.table-pagination{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:25px;

    flex-wrap:wrap;

    gap:15px;

}

.pagination{

    display:flex;

    gap:8px;

}

.pagination a{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:8px;

    background:#FFF;

    color:var(--text);

    border:1px solid var(--border);

    transition:.3s;

}

.pagination a:hover{

    background:var(--gold);

    color:#FFF;

}

.pagination .active{

    background:var(--gold);

    color:#FFF;

    border-color:var(--gold);

}

/*==========================================================
  PESQUISA
==========================================================*/

.table-search{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    gap:20px;

    flex-wrap:wrap;

}

.table-search input{

    width:320px;

    max-width:100%;

    height:48px;

    padding:0 18px;

    border:1px solid var(--border);

    border-radius:var(--radius);

    background:#FFF;

}

.table-search input:focus{

    border-color:var(--gold);

    box-shadow:0 0 0 .2rem rgba(200,154,50,.15);

}

/*==========================================================
  TABELA VAZIA
==========================================================*/

.table-empty{

    padding:60px;

    text-align:center;

    color:var(--text-light);

}

.table-empty i{

    font-size:4rem;

    color:var(--gold);

    margin-bottom:20px;

}

.table-empty h4{

    color:var(--primary);

    margin-bottom:10px;

}

/*==========================================================
  RESPONSIVO
==========================================================*/

@media(max-width:768px){

    .table{

        min-width:700px;

    }

    .table-search{

        flex-direction:column;

        align-items:stretch;

    }

    .table-pagination{

        flex-direction:column;

        text-align:center;

    }

}