/* =====================================================
   CUSTONIS ADMIN UI – CLEAN SECURITY STYLE
===================================================== */

.custonis-wrap{
max-width:1100px;
}

/* =====================================================
   GRID & CARDS
===================================================== */

.custonis-grid{
display:flex;
gap:20px;
flex-wrap:wrap;
margin-top:20px;
}

.custonis-card{
background:#ffffff;
border-radius:16px;
padding:24px;
border:1px solid #e5e7eb;
box-shadow:0 6px 18px rgba(0,0,0,0.05);
flex:1 1 300px;
}

.custonis-card h3{
margin:0;
font-size:12px;
text-transform:uppercase;
color:#6b7280;
letter-spacing:0.6px;
}

.custonis-card h3 .dashicons{
margin-right:6px;
color:#6b7280;
vertical-align:-2px;
}

.custonis-metric{
font-size:28px;
font-weight:600;
margin-top:6px;
}

.custonis-risk-critical{color:#dc2626;}
.custonis-risk-elevated{color:#d97706;}
.custonis-risk-low{color:#16a34a;}

.custonis-muted{
font-size:12px;
color:#6b7280;
}

/* =====================================================
   HEALTH BANNER
===================================================== */

.custonis-health-banner{
border-radius:18px;
padding:26px;
margin:20px 0 25px 0;
color:#ffffff;
font-size:20px;
font-weight:600;
}

.custonis-health-critical{
background:linear-gradient(135deg,#dc2626,#991b1b);
}

.custonis-health-elevated{
background:linear-gradient(135deg,#f59e0b,#d97706);
}

.custonis-health-low{
background:linear-gradient(135deg,#16a34a,#15803d);
}

.custonis-health-sub{
font-size:13px;
margin-top:6px;
opacity:0.9;
}

/* =====================================================
   SCORE RING
===================================================== */

.custonis-score-ring{
width:140px;
height:140px;
position:relative;
}

.custonis-score-ring svg{
transform:rotate(-90deg);
}

.custonis-score-ring circle{
fill:none;
stroke-width:10;
stroke-linecap:round;
}

.custonis-score-bg{
stroke:#e5e7eb;
}

.custonis-score-progress{
stroke:#16a34a;
transition:stroke-dashoffset 1.2s ease;
}

.custonis-score-elevated{
stroke:#f59e0b;
}

.custonis-score-critical{
stroke:#dc2626;
}

.custonis-score-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:26px;
font-weight:700;
color:#1f2937;
}

/* =====================================================
   FINDINGS TABLE
===================================================== */

.custonis-table{
margin-top:30px;
background:#ffffff;
border-radius:16px;
padding:20px;
border:1px solid #e5e7eb;
overflow-x:auto;
}

.custonis-table table{
width:100%;
border-collapse:collapse;
table-layout:auto;
}

.custonis-table th,
.custonis-table td{
padding:14px 16px;
border-top:1px solid #f1f5f9;
vertical-align:middle;
font-size:14px;
}

.custonis-table th{
text-align:left;
font-size:12px;
color:#6b7280;
text-transform:uppercase;
letter-spacing:0.4px;
}

/* =====================================================
   COLUMN WIDTH
===================================================== */

.custonis-table th:nth-child(1),
.custonis-table td:nth-child(1){
width:140px;
}

.custonis-table th:nth-child(2),
.custonis-table td:nth-child(2){
min-width:260px;
}

/* =====================================================
   SEVERITY GROUP HEADERS
===================================================== */

.custonis-group-header td{
background:#f1f5f9;
font-weight:700;
font-size:12px;
text-transform:uppercase;
letter-spacing:0.5px;
padding:12px 16px;
border-top:2px solid #e5e7eb;
}

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

.custonis-severity-label{
display:inline-block;
padding:4px 8px;
border-radius:6px;
font-size:11px;
font-weight:700;
letter-spacing:0.4px;
}

/* row backgrounds */

.custonis-row-critical{
background:rgba(220,38,38,0.06);
}

.custonis-row-elevated{
background:rgba(245,158,11,0.07);
}

.custonis-row-resolved{
background:#f3f4f6;
opacity:0.65;
}

/* badge colors */

.custonis-row-critical .custonis-severity-label{
background:#fee2e2;
color:#dc2626;
}

.custonis-row-elevated .custonis-severity-label{
background:#fef3c7;
color:#d97706;
}

.custonis-row-low .custonis-severity-label{
background:#dcfce7;
color:#16a34a;
}

/* =====================================================
   FILE BLOCK
===================================================== */

.custonis-file{
display:flex;
align-items:center;
gap:8px;
flex-wrap:nowrap;
}

.custonis-file-name{
font-weight:500;
}

.custonis-file .dashicons{
font-size:18px;
width:18px;
height:18px;
color:#6b7280;
flex-shrink:0;
}

/* =====================================================
   STATUS LABELS
===================================================== */

.custonis-status-new{
margin-left:8px;
font-size:11px;
color:#2563eb;
font-weight:700;
}

.custonis-status-resolved{
margin-left:8px;
font-size:11px;
color:#059669;
font-weight:700;
}

/* =====================================================
   EXPOSURE AGE
===================================================== */

.custonis-exposure-age{
font-size:11px;
color:#6b7280;
margin-left:26px;
margin-top:2px;
}

/* =====================================================
   EXPAND ROW
===================================================== */

.custonis-expand-row{
cursor:pointer;
transition:background 0.15s ease;
}

.custonis-expand-row:hover{
background:rgba(0,0,0,0.02);
}

.custonis-chevron{
display:inline-block;
margin-left:6px;
font-size:14px;
transition:transform 0.2s ease;
}

.custonis-expand-row.active .custonis-chevron{
transform:rotate(180deg);
}

/* =====================================================
   DETAIL PANEL
===================================================== */

.custonis-detail-row{
display:none;
}

.custonis-detail-row.custonis-detail-visible{
display:table-row;
}

.custonis-detail-row td{
padding:14px 16px;
}

.custonis-detail-content{
background:#f9fafb;
border-radius:10px;
padding:16px;
color:#4b5563;
}

.custonis-detail-title{
font-size:11px;
font-weight:600;
color:#111827;
margin:10px 0 4px 0;
}

.custonis-detail-content p{
font-size:12px;
line-height:1.5;
margin:0 0 10px 0;
}

/* =====================================================
   URL LINKS
===================================================== */

.custonis-detail-content a{
color:#2563eb;
text-decoration:none;
word-break:break-word;
}

.custonis-detail-content a:hover{
text-decoration:underline;
}

/* =====================================================
   SCAN HISTORY
===================================================== */

#custonisScoreChart{
height:220px;
width:100%;
margin-top:16px;
}

/* =====================================================
   MOBILE POLISH
===================================================== */

@media (max-width:800px){

.custonis-grid{
flex-direction:column;
}

.custonis-card{
flex:1 1 auto;
}

}

.custonis-group-row{
background:#f8fafc;
font-weight:500;
}


.custonis-scan-buttons{
display:flex;
gap:12px;
margin:20px 0;
}

.custonis-btn{
padding:10px 18px;
border-radius:6px;
border:none;
font-weight:600;
cursor:pointer;
}

.custonis-btn.quick{
background:#4CAF50;
color:white;
}

.custonis-btn.security{
background:#2196F3;
color:white;
}

.custonis-btn.deep{
background:#111827;
color:white;
}

.custonis-scan-buttons{
    display:flex;
    gap:16px;
    margin-top:20px;
}

.custonis-scan-buttons .custonis-btn{
    flex:1;
}

.custonis-detected-data {
    margin-top:12px;
    padding:10px;
    background:#f8fafc;
    border-radius:6px;
    font-size:14px;
}

.custonis-detected-data{
margin-top:12px;
padding:10px 12px;
background:#fff7e6;
border-left:4px solid #f59e0b;
border-radius:4px;
font-size:14px;
}


#custonis-scan-loading{
margin-top:20px;
}

.custonis-step{
opacity:.35;
color:#9ca3af;
margin:6px 0;
transition:.25s;
}

.custonis-step-active{
opacity:1;
color:#111827;
font-weight:600;
}


.custonis-spinner{
    width:18px;
    height:18px;
    border-radius:50%;
    background:#3b82f6;
    display:inline-block;
    margin-right:10px;
    animation:custonis-pulse 1s infinite;
}

@keyframes custonis-pulse{

    0%{
        transform:scale(0.9);
        opacity:0.6;
    }

    50%{
        transform:scale(1.2);
        opacity:1;
    }

    100%{
        transform:scale(0.9);
        opacity:0.6;
    }

}