/* =========================================================
   VANCE CEYLON - ADMIN ANALYTICS DASHBOARD
   Add-on only. Does not replace admin.css.
========================================================= */

#vanceAnalyticsDashboard{
    width:100%;
    box-sizing:border-box;
    padding:28px;
    color:#fff;
}

.vance-analytics-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin-bottom:24px;
}

.vance-analytics-title small{
    display:block;
    margin-bottom:6px;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    opacity:.55;
}

.vance-analytics-title h2{
    margin:0;
    font-size:30px;
    font-weight:700;
    letter-spacing:-1px;
}

.vance-analytics-controls{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
}

.vance-ga-status{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:11px;
    color:#888;
}

.vance-ga-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#777;
}

.vance-ga-status.connected .vance-ga-dot{ background:#65d46e; }
.vance-ga-status.error .vance-ga-dot{ background:#ff6b6b; }

.vance-analytics-period{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.vance-period-btn{
    border:1px solid rgba(255,255,255,.13);
    background:#111;
    color:#aaa;
    padding:9px 14px;
    border-radius:8px;
    cursor:pointer;
    font-size:12px;
}

.vance-period-btn:hover,
.vance-period-btn.active{
    background:#fff;
    color:#000;
    border-color:#fff;
}

.vance-analytics-cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:14px;
}

.vance-stat-card,
.vance-analytics-panel{
    background:#0c0c0c;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
}

.vance-stat-card{ padding:20px; }

.vance-stat-label{
    display:block;
    font-size:11px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:#888;
    margin-bottom:14px;
}

.vance-stat-number{
    display:block;
    font-size:30px;
    line-height:1;
    font-weight:700;
}

.vance-stat-note{
    margin-top:10px;
    display:block;
    font-size:11px;
    color:#666;
}

.vance-analytics-grid{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(280px,1fr);
    gap:14px;
}

.vance-analytics-panel{
    padding:20px;
    min-width:0;
}

.vance-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}

.vance-panel-head h3{
    margin:0;
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.vance-panel-head span{
    color:#666;
    font-size:11px;
}

.vance-chart-wrap{
    width:100%;
    height:310px;
    position:relative;
}

#vanceTrafficChart{
    width:100% !important;
    height:100% !important;
}

.vance-analytics-list{
    display:flex;
    flex-direction:column;
}

.vance-list-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:15px;
    padding:13px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.vance-list-row:last-child{ border-bottom:0; }

.vance-list-name{
    font-size:13px;
    color:#bbb;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.vance-list-value{
    font-weight:600;
    font-size:13px;
}

.vance-analytics-bottom{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:14px;
}

.vance-funnel{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.vance-funnel-item{
    display:grid;
    grid-template-columns:110px 1fr 44px;
    gap:12px;
    align-items:center;
}

.vance-funnel-name{
    font-size:12px;
    color:#aaa;
}

.vance-funnel-bar{
    height:7px;
    border-radius:20px;
    background:#1b1b1b;
    overflow:hidden;
}

.vance-funnel-fill{
    height:100%;
    width:0;
    border-radius:20px;
    background:#fff;
    transition:width .35s ease;
}

.vance-funnel-number{
    text-align:right;
    font-size:12px;
}

.vance-analytics-error{
    margin-top:14px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    color:#aaa;
    font-size:12px;
    display:none;
}

.vance-analytics-error.show{ display:block; }

@media(max-width:1100px){
    .vance-analytics-cards{ grid-template-columns:repeat(2,1fr); }
    .vance-analytics-grid{ grid-template-columns:1fr; }
    .vance-analytics-bottom{ grid-template-columns:1fr; }
}

@media(max-width:650px){
    #vanceAnalyticsDashboard{ padding:16px; }
    .vance-analytics-header{ flex-direction:column; align-items:flex-start; }
    .vance-analytics-controls{ align-items:flex-start; }
    .vance-analytics-cards{ grid-template-columns:1fr; }
}