/* Tabela Estilizada */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    flex: 1 1 auto;
    max-height: calc(100vh - 200px);
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    background: #fafafa;
    padding: 10px 2px;
    text-align: left;
    font-size: var(--text);
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

tbody td {
    padding: 4px 2px;
    font-size: var(--text);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}

tr:last-child td { border-bottom: none; }
tbody tr:hover{background: var(--cinza);}

.usage{ display:flex; align-items:center; gap:10px; width: 5px;}
.prog{position:relative; flex:1 1 auto; height:30px; min-width:40px;background:rgba(255,255,255,0.08); border:1px solid var(--glass-border);
  border-radius:var(--radius); overflow:hidden;
}
.prog:hover{color: var(--text);}
.prog-bar{ position:absolute; left:0; top:0; bottom:0; width:0; transition:width .4s ease; }    
.prog-text{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:var(--text); letter-spacing:.5px; color:var(--text); pointer-events:none; } 
.ok .prog-bar{   background:linear-gradient(90deg, rgba(146, 216, 176, 0.9), rgba(139, 211, 170, 0.6)); }
.warn .prog-bar{ background:linear-gradient(90deg, rgba(255,159,46,.95), rgba(255,159,46,.6)); }
.bad .prog-bar{  background:linear-gradient(90deg, rgba(201, 103, 103, 0.95),  rgba(172, 59, 59, 0.6)); }




/* Badges de Status */
#table tbody td:first-child,
#table tbody td:nth-child(2) {
    text-align: center;
}

.status-badge {
    width:15px;
    height:15px;
    border-radius:50%;
    box-shadow: 0 0 6px rgba(0,0,0,.25);
    display:inline-block;
}

.status-badge.completo { background: var(--verde); }
.status-badge.atrasado { background: var(--vermelho); color: var(--branco); }
.status-badge.pendente { background: var(--amarelo); }
.status-badge.cancelado { background: var(--cinza); color: var(--branco); }



/* Barras de Progresso */
.usage-col { width: 120px; }
.prog-container {
    height: 8px;
    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.prog-fill { height: 100%; transition: width 0.5s ease; }
.prog-fill.docs { background: var(--blue-text); }
.prog-fill.uso { background: var(--green-text); }

/* Paginação */
.card-footer {
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border);
}

.pagination{ display:flex; gap:10px; align-items:center; justify-content:center; margin: 18px 10px 15px;}
.page-btn{
  font-size: var(--text); padding:6px 16px; background: var(--branco);
  border:1px solid var(--glass-border); border-radius: var(--radius); color: var(--text);
  cursor:pointer; transition: background .2s; text-decoration:none; user-select:none;
}
.page-btn:hover{ background-color: var(--azul); opacity: 0.9; color: var(--branco);}
.page-btn.selected{ background-color: var(--azul); opacity: 0.9; color: var(--branco);}
.page-btn.disabled{ background: var(--azul); pointer-events:none; cursor:default; opacity:0.5; color: var(--branco);}

.lpp-select{padding:8px; border:1px solid var(--border); border-radius:var(--radius); width: 120px;background-color:var(--branco); color:var(--text); 
    font-size:var(--text); backdrop-filter:blur(20px); outline:none;
  }
  
.lpp-label{ font-size:var(--text); opacity:.9;} 
#lpp.lpp-select option{ color: var(--text2); }
.menu-filtro {position: relative; }
.menu-filtro i {font-size: var(--text) transition: transform 0.2s ease;}
.menu-filtro.open i { transform: rotate(180deg);}
.filtro-submenu {
    position: absolute;
    right: 40%;
    transform: translateX(50%);
    top: 110%;
    min-width: 20px;
    z-index: 50;
    padding-left: 0;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    display: none;
    flex-direction: column;
    gap: 0px;
}

.menu-filtro.open .filtro-submenu {
    display: flex;
}

.filtro-submenu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid var(--glass-border);
    cursor: pointer;
    font-size: var(--text);
    color: var(--text);
    text-align: left;
    justify-content: flex-start;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: var(--radius);
    transition: all 0.2s;
}
.filtro-submenu-item.active {
    background: var(--azul);
    color: var(--branco);
}

.filtro-submenu-item:hover {
    background: var(--azul);
    color: var(--branco);
    transition: all 0.2s;
}