/* ==========================================================
   AI Compliance Europe - Dashboard Component
   Standalone CSS (Everything Required)
========================================================== */

/* ---------- Base ---------- */

*,
*::before,
*::after{
    box-sizing:border-box;
}

.dash{
    background:#12244E;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.35);
    color:#fff;
    overflow:hidden;
    font-family:'Open Sans',Arial,sans-serif;
}

/* ---------- Top Bar ---------- */

.dash-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 18px;
    border-bottom:1px solid rgba(255,255,255,.10);
    font-size:.78rem;
    color:rgba(255,255,255,.60);
}

/* ---------- Window Dots ---------- */

.dots{
    display:flex;
    align-items:center;
}

.dots span{
    display:inline-block;
    width:9px;
    height:9px;
    margin-right:5px;
    border-radius:50%;
}

.dots span:nth-child(1){
    background:#E0604F;
}

.dots span:nth-child(2){
    background:#E8B93E;
}

.dots span:nth-child(3){
    background:#57B26A;
}

/* ---------- Body ---------- */

.dash-body{
    padding:22px 22px 24px;
}

.dash-label{
    display:block;
    margin-bottom:14px;
    font-family:'Montserrat',Arial,sans-serif;
    font-size:.70rem;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
}

/* ---------- Countdown ---------- */

.countdown{
    display:flex;
    gap:12px;
    margin:14px 0 8px;
}

.cd-cell{
    flex:1;
    padding:16px 0;
    text-align:center;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
}

.cd-cell b{
    display:block;
    font-family:'IBM Plex Mono',monospace;
    font-size:1.55rem;
    font-weight:600;
    line-height:1.1;
    color:#FFCC00;
}

.cd-cell i{
    display:block;
    margin-top:3px;
    font-style:normal;
    font-size:.68rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,.60);
}

/* ---------- Note ---------- */

.dash-note{
    margin:0 0 16px;
    font-size:.80rem;
    line-height:1.6;
    color:rgba(255,255,255,.65);
}

/* ---------- Timeline ---------- */

.timeline{
    list-style:none;
    margin:6px 0 20px;
    padding:0;
}

.timeline li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:9px 0;
    border-bottom:1px dashed rgba(255,255,255,.12);
    font-size:.86rem;
    line-height:1.45;
    color:rgba(255,255,255,.85);
margin-bottom: 2px;
}

.timeline li:last-child{
    border-bottom:none;
}

.tl-date{
    min-width:92px;
    white-space:nowrap;
    font-family:'IBM Plex Mono',monospace;
    font-size:.78rem;
    color:#FFCC00;
}

.tl-tag{
    margin-left:auto;
    white-space:nowrap;
    padding:1px 6px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:4px;
    font-size:.62rem;
    font-weight:400;
    letter-spacing:.10em;
    text-transform:uppercase;
}

.tl-done{
    color:rgba(255,255,255,.55);
}

.tl-done .tl-date{
    color:#7FD6A4;
}

.tl-done .tl-tag{
    color:#7FD6A4;
    border-color:#4C8A67;
}

/* ---------- Buttons ---------- */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:auto;
    padding:15px 26px;
    border:2px solid transparent;
    border-radius:8px;
    cursor:pointer;
    text-decoration:none;
    font-family:'Montserrat',Arial,sans-serif;
    font-size:.95rem;
    font-weight:700;
    transition:
        background .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.btn:focus-visible{
    outline:3px solid #1E56B3;
    outline-offset:3px;
}

.btn-gold{
    background:#FFCC00;
    color:#0D1B3D;
    box-shadow:0 6px 18px rgba(255,204,0,.28);
}

.btn-gold:hover{
    background:#E6B800;
    transform:translateY(-2px);
}

.btn-block{
    width:100%;
}

.dash .btn{
    font-size:.85rem;
}

.arrow{
    font-family:'Open Sans',Arial,sans-serif;
    font-weight:700;
}

/* ---------- Responsive ---------- */

@media (max-width:600px){

    .countdown{
        gap:8px;
    }

    .cd-cell b{
        font-size:1.2rem;
    }

    .timeline li{
        flex-wrap:wrap;
    }

    .tl-tag{
        margin-left:104px;
        margin-top:6px;
    }

    .btn{
        padding:14px 18px;
    }

}