/* Estilos exclusivos da página onlines.php */

.dns-wrap{
    width:100%;
    max-width:none;
    margin:0;
    padding:0 18px;
}
.dns-card{
    border-radius:18px;
    overflow:hidden;
    width:100%;
    margin-bottom:18px;
}
.dns-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:18px 22px;
}
.dns-title{
    display:flex;
    align-items:center;
    gap:14px;
}
.dns-title .ic{
    width:44px;
    height:44px;
    min-width:44px;
    border-radius:14px;
    background:rgba(25,135,84,.10);
    border:1px solid rgba(25,135,84,.20);
    display:flex;
    align-items:center;
    justify-content:center;
}
.dns-title .ic i{
    font-size:24px;
    color:#198754;
}
.dns-title h5{
    margin:0;
    font-weight:900;
}
.dns-title span{
    display:block;
    margin-top:3px;
    font-size:13px;
    color:rgba(255,255,255,.55);
}
.badge-soft{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(25,135,84,.10);
    border:1px solid rgba(25,135,84,.20);
    color:#198754;
    font-weight:900;
    white-space:nowrap;
}
.table{
    margin:0;
}
.table thead th{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.6px;
    opacity:.75;
    font-weight:1000;
    white-space:nowrap;
}
.table td{
    padding-top:14px;
    padding-bottom:14px;
    vertical-align:middle;
}
.mac{
    font-weight:1000;
    letter-spacing:.2px;
    white-space:nowrap;
}
.content-title{
    font-weight:1000;
}
.sub{
    font-size:12px;
    opacity:.75;
    margin-top:2px;
}
.small-muted{
    font-size:12px;
    color:rgba(255,255,255,.55);
}
.badge{
    border-radius:999px;
    padding:7px 10px;
    font-weight:1000;
    letter-spacing:.2px;
}
.progress-pill{
    font-weight:1000;
    border-radius:999px;
    padding:7px 12px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1px solid rgba(13,110,253,.18);
    background:rgba(13,110,253,.08);
    color:#0d6efd;
    white-space:nowrap;
}
.device-pill{
    font-weight:1000;
    border-radius:999px;
    padding:7px 12px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1px solid rgba(13,110,253,.18);
    background:rgba(13,110,253,.08);
    color:#0d6efd;
    white-space:nowrap;
}
.device-pill.is-mobile{
    border-color:rgba(25,135,84,.18);
    background:rgba(25,135,84,.10);
    color:#198754;
}
.device-pill.is-tv{
    border-color:rgba(255,193,7,.20);
    background:rgba(255,193,7,.10);
    color:#a36b00;
}
.details-btn{
    border-radius:14px;
    min-height:38px;
    font-weight:900;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}
.sensitive-modal-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.sensitive-row{
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:center;
    border:1px solid rgba(0,0,0,.08);
    background:rgba(0,0,0,.025);
    border-radius:14px;
    padding:10px 12px;
}
.sensitive-row small{
    color:#444;
    font-weight:900;
}
.sensitive-row strong{
    color:#000;
    text-align:right;
    word-break:break-word;
}
.modal-content{
    border-radius:20px !important;
    overflow:hidden;
}
.modal-header{
    background:rgba(0,0,0,.02);
    border-bottom:1px solid rgba(0,0,0,.06);
}
.modal-footer .btn{
    border-radius:14px;
    font-weight:900;
}
#onlineDetailsModal.manual-show{
    display:block !important;
    opacity:1 !important;
    background:rgba(0,0,0,.58);
}
#onlineDetailsModal.manual-show .modal-dialog{
    transform:none !important;
}
body.modal-open-manual{
    overflow:hidden;
}
@media(max-width:575px){
    .dns-wrap{
        padding:0 8px;
    }
    .dns-header{
        align-items:flex-start;
        padding:16px;
    }
    .dns-title .ic{
        width:40px;
        height:40px;
        min-width:40px;
    }
    .dns-title .ic i{
        font-size:22px;
    }
    .dns-title h5{
        font-size:18px;
    }
    .badge-soft{
        padding:7px 10px;
        font-size:12px;
    }
}

.empty-state-cell{padding:26px 8px}
