/* ==========================================================
   OPN Stake
   dashboard.css
   Production Dashboard UI
   ========================================================== */

:root{

    --dashboard-bg:#0b1120;

    --card-bg:#111827;

    --card-bg-hover:#172033;

    --border-color:rgba(255,255,255,.08);

    --primary:#00ffae;

    --secondary:#4f7cff;

    --warning:#fbbf24;

    --danger:#ef4444;

    --success:#22c55e;

    --text:#ffffff;

    --text-muted:#94a3b8;

    --radius:24px;

    --shadow:
    0 20px 50px rgba(0,0,0,.35);
}

/* ==========================================================
   DASHBOARD WRAPPER
   ========================================================== */

.dashboard-section{

    position:relative;

    padding:120px 0;

    background:var(--dashboard-bg);
}

.dashboard-container{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:0 24px;
}

/* ==========================================================
   METRICS GRID
   ========================================================== */

.metrics-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:24px;

    margin-bottom:40px;
}

.metric-card{

    background:var(--card-bg);

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

    border-radius:var(--radius);

    padding:28px;

    transition:.3s ease;

    position:relative;

    overflow:hidden;
}

.metric-card:hover{

    transform:translateY(-4px);

    background:var(--card-bg-hover);
}

.metric-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:var(--primary);
}

.metric-label{

    color:var(--text-muted);

    font-size:.85rem;

    margin-bottom:12px;
}

.metric-value{

    font-size:2rem;

    font-weight:700;

    color:var(--text);
}

.metric-change{

    margin-top:10px;

    font-size:.9rem;
}

.metric-change.positive{

    color:var(--success);
}

.metric-change.negative{

    color:var(--danger);
}

/* ==========================================================
   DASHBOARD GRID
   ========================================================== */

.dashboard-grid{

    display:grid;

    grid-template-columns:
    repeat(12,1fr);

    gap:24px;
}

.col-4{

    grid-column:span 4;
}

.col-6{

    grid-column:span 6;
}

.col-8{

    grid-column:span 8;
}

.col-12{

    grid-column:span 12;
}

/* ==========================================================
   CHART CARD
   ========================================================== */

.chart-card{

    background:var(--card-bg);

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

    border-radius:var(--radius);

    padding:24px;

    box-shadow:var(--shadow);

    min-height:420px;

    position:relative;
}

.chart-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;
}

.chart-title{

    color:var(--text);

    font-size:1.1rem;

    font-weight:600;
}

.chart-subtitle{

    color:var(--text-muted);

    font-size:.85rem;
}

.chart-card canvas{

    width:100% !important;

    height:320px !important;
}

/* ==========================================================
   STAKING PANEL
   ========================================================== */

.staking-panel{

    background:var(--card-bg);

    border-radius:var(--radius);

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

    padding:32px;
}

.staking-panel h3{

    color:var(--text);

    margin-bottom:24px;
}

.stake-input-group{

    margin-bottom:20px;
}

.stake-input-group label{

    display:block;

    margin-bottom:8px;

    color:var(--text-muted);
}

.stake-input{

    width:100%;

    padding:16px;

    border-radius:14px;

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

    background:#0f172a;

    color:#fff;
}

.stake-input:focus{

    outline:none;

    border-color:var(--primary);
}

.stake-summary{

    margin-top:24px;

    display:flex;

    flex-direction:column;

    gap:12px;
}

.summary-row{

    display:flex;

    justify-content:space-between;
}

.summary-label{

    color:var(--text-muted);
}

.summary-value{

    color:var(--text);
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.primary-btn{

    width:100%;

    padding:16px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:#000;

    font-weight:700;

    cursor:pointer;

    transition:.3s ease;
}

.primary-btn:hover{

    transform:translateY(-2px);
}

.secondary-btn{

    width:100%;

    padding:16px;

    border-radius:14px;

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

    background:transparent;

    color:#fff;

    cursor:pointer;
}

/* ==========================================================
   VALIDATOR TABLE
   ========================================================== */

.validator-card{

    background:var(--card-bg);

    border-radius:var(--radius);

    padding:24px;

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

.validator-table{

    width:100%;

    border-collapse:collapse;
}

.validator-table th{

    text-align:left;

    color:var(--text-muted);

    padding:14px;
}

.validator-table td{

    padding:14px;

    border-top:
    1px solid
    var(--border-color);
}

.validator-status{

    display:inline-flex;

    align-items:center;

    gap:6px;
}

.validator-status.online{

    color:var(--success);
}

.validator-status.offline{

    color:var(--danger);
}

/* ==========================================================
   GOVERNANCE
   ========================================================== */

.governance-grid{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:24px;
}

.proposal-card{

    background:var(--card-bg);

    border-radius:var(--radius);

    padding:28px;

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

    transition:.3s ease;
}

.proposal-card:hover{

    transform:translateY(-4px);
}

.proposal-status{

    display:inline-flex;

    padding:6px 12px;

    border-radius:999px;

    font-size:.8rem;

    margin-bottom:16px;
}

.proposal-status.active{

    background:
    rgba(34,197,94,.15);

    color:var(--success);
}

.proposal-status.pending{

    background:
    rgba(251,191,36,.15);

    color:var(--warning);
}

.proposal-status.passed{

    background:
    rgba(0,255,174,.15);

    color:var(--primary);
}

.vote-bar{

    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:#1f2937;

    margin-top:20px;
}

.vote-progress{

    height:100%;

    background:var(--primary);
}

/* ==========================================================
   TREASURY
   ========================================================== */

.treasury-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:24px;
}

.treasury-card{

    background:var(--card-bg);

    border-radius:var(--radius);

    padding:28px;

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

.treasury-label{

    color:var(--text-muted);

    margin-bottom:10px;
}

.treasury-value{

    color:var(--text);

    font-size:1.8rem;

    font-weight:700;
}

/* ==========================================================
   PORTFOLIO
   ========================================================== */

.portfolio-card{

    background:var(--card-bg);

    border-radius:var(--radius);

    padding:24px;

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

.asset-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

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

.asset-row:last-child{

    border:none;
}

.asset-symbol{

    color:#fff;

    font-weight:600;
}

.asset-balance{

    color:var(--primary);
}

/* ==========================================================
   ACTIVITY FEED
   ========================================================== */

.activity-feed{

    display:flex;

    flex-direction:column;

    gap:16px;
}

.activity-item{

    display:flex;

    gap:12px;

    padding:16px;

    background:#0f172a;

    border-radius:14px;
}

.activity-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,255,174,.12);
}

.activity-content{

    flex:1;
}

.activity-title{

    color:#fff;

    margin-bottom:4px;
}

.activity-time{

    color:var(--text-muted);

    font-size:.85rem;
}

/* ==========================================================
   DAO MODAL
   ========================================================== */

.governance-modal{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.75);

    z-index:9999;
}

.governance-modal.active{

    display:flex;
}

.governance-modal-content{

    width:100%;

    max-width:800px;

    background:#111827;

    border-radius:24px;

    padding:32px;

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

/* ==========================================================
   LOADING STATES
   ========================================================== */

.skeleton{

    background:
    linear-gradient(
        90deg,
        #111827,
        #1f2937,
        #111827
    );

    background-size:
    200% 100%;

    animation:
    skeleton-loading
    1.5s infinite;
}

@keyframes skeleton-loading{

    0%{
        background-position:
        200% 0;
    }

    100%{
        background-position:
        -200% 0;
    }
}

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

.badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 12px;

    border-radius:999px;

    font-size:.8rem;

    background:
    rgba(0,255,174,.12);

    color:var(--primary);
}

/* ==========================================================
   LIVE INDICATOR
   ========================================================== */

.live-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--success);

    animation:pulse 1.5s infinite;
}

@keyframes pulse{

    0%{
        box-shadow:
        0 0 0 0
        rgba(34,197,94,.7);
    }

    100%{
        box-shadow:
        0 0 0 12px
        rgba(34,197,94,0);
    }
}