/* Mynqora V2.4 — Smart Finance + mobile */

.v24-notifications{
    position:relative;
}
.v24-notifications > summary{
    list-style:none;
}
.v24-notifications > summary::-webkit-details-marker{
    display:none;
}
.v24-bell{
    width:40px;
    height:40px;
    border-radius:12px;
    border:1px solid #2a3b54;
    background:#111f32;
    display:grid;
    place-items:center;
    color:#f5f7fb;
    cursor:pointer;
    position:relative;
    font-weight:900;
}
.v24-bell:hover{
    background:#17283f;
    border-color:#3a506e;
}
.v24-bell > span{
    font-size:18px;
    transform:rotate(45deg);
}
.v24-bell b{
    position:absolute;
    top:-6px;
    right:-6px;
    min-width:19px;
    height:19px;
    padding:0 5px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:#39d1b1;
    color:#07120f!important;
    font-size:10px;
    border:2px solid #0b1524;
}
html[dir="rtl"] .v24-bell b{
    right:auto;
    left:-6px;
}
.v24-notification-panel{
    position:absolute;
    top:48px;
    right:0;
    width:min(390px,calc(100vw - 24px));
    background:#0f1a2b;
    border:1px solid #2a3b54;
    border-radius:18px;
    box-shadow:0 24px 70px rgba(0,0,0,.48);
    padding:15px;
    z-index:9800;
}
html[dir="rtl"] .v24-notification-panel{
    right:auto;
    left:0;
}
.v24-notification-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:2px 2px 12px;
}
.v24-notification-head small{
    color:#6ce4cc;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.v24-notification-head h3{
    margin:2px 0 0;
}
.v24-notification-head a{
    color:#6ce4cc;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
}
.v24-notification-list{
    display:grid;
    gap:8px;
}
.v24-notification-item{
    display:flex;
    gap:10px;
    align-items:flex-start;
    text-decoration:none;
    padding:11px;
    border-radius:13px;
    border:1px solid #26364d;
    background:#111f32;
    color:#f5f7fb;
}
.v24-notification-item:hover{
    background:#142236;
}
.v24-notification-item > span:last-child{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}
.v24-notification-item strong{
    font-size:12px;
}
.v24-notification-item small{
    font-size:11px;
    line-height:1.45;
    color:#9eacc0;
}
.v24-notification-icon{
    width:28px;
    height:28px;
    border-radius:9px;
    display:grid;
    place-items:center;
    flex:0 0 28px;
    font-weight:900;
    background:#142236;
    color:#6ce4cc;
}
.v24-notification-item.warning .v24-notification-icon{
    background:#3b2d12;
    color:#fbbf24;
}
.v24-notification-item.danger .v24-notification-icon{
    background:#3a1723;
    color:#fb7185;
}
.v24-notification-item.success .v24-notification-icon{
    background:#103629;
    color:#6ee7b7;
}
.v24-empty-notification{
    padding:18px 12px;
    border-radius:13px;
    background:#111f32;
    border:1px solid #26364d;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.v24-empty-notification span{
    color:#9eacc0;
    font-size:12px;
}

/* V2.4 cards */
.v24-alert-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.v24-alert-card{
    padding:17px;
    border-radius:16px;
    border:1px solid #26364d;
    background:#0f1a2b;
}
.v24-alert-card small{
    display:block;
    color:#6ce4cc;
    font-size:11px;
    font-weight:800;
    margin-bottom:7px;
}
.v24-alert-card strong{
    display:block;
    font-size:22px;
    margin-bottom:4px;
}
.v24-alert-card p{
    margin:0;
    color:#9eacc0;
    font-size:12px;
    line-height:1.55;
}
.v24-score-details{
    display:grid;
    gap:9px;
    margin-top:15px;
}
.v24-score-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:9px 0;
    border-top:1px solid #26364d;
    font-size:12px;
}
.v24-score-row span{
    color:#9eacc0;
}
.v24-score-row b.positive{
    color:#6ee7b7!important;
}
.v24-score-row b.negative{
    color:#fb7185!important;
}

/* Notifications page */
.v24-page-notifications{
    display:grid;
    gap:10px;
}
.v24-page-notification{
    display:flex;
    align-items:flex-start;
    gap:13px;
    padding:16px;
    border-radius:16px;
    background:#0f1a2b;
    border:1px solid #26364d;
    text-decoration:none;
    color:#f5f7fb;
}
.v24-page-notification p{
    margin:4px 0 0;
    color:#9eacc0;
    line-height:1.6;
}

/* Mobile improvements */
@media(max-width:1100px){
    .nav-wrap{
        gap:12px!important;
        flex-wrap:wrap!important;
    }
    .desktop-nav{
        order:3;
        width:100%;
        overflow-x:auto;
        white-space:nowrap;
        padding-bottom:4px;
        scrollbar-width:none;
    }
    .desktop-nav::-webkit-scrollbar{display:none}
    .desktop-nav a{
        flex:0 0 auto;
    }
    .nav-actions{
        margin-inline-start:auto;
    }
    .v24-alert-grid{
        grid-template-columns:1fr 1fr;
    }
}
@media(max-width:760px){
    .container{
        width:min(100% - 24px,1200px)!important;
    }
    .nav-wrap{
        padding-top:10px!important;
        padding-bottom:10px!important;
    }
    .brand span:last-child{
        display:none;
    }
    .user-chip span:last-child{
        display:none;
    }
    .user-chip{
        padding:6px!important;
    }
    .nav-actions{
        gap:6px!important;
    }
    .btn.btn-ghost[href="logout.php"]{
        display:none;
    }
    .desktop-nav{
        gap:4px!important;
    }
    .desktop-nav a{
        padding:9px 10px!important;
        font-size:12px!important;
    }
    .stats,
    .grid-4,
    .grid-3,
    .grid-2,
    .grid-main{
        grid-template-columns:1fr!important;
    }
    .v24-alert-grid{
        grid-template-columns:1fr;
    }
    .page-head-row{
        align-items:flex-start!important;
        flex-direction:column!important;
    }
    .page-head-row > .btn{
        width:100%;
        justify-content:center;
    }
    .table-wrap{
        overflow-x:auto!important;
        -webkit-overflow-scrolling:touch;
    }
    table{
        min-width:680px;
    }
    .form-grid{
        grid-template-columns:1fr!important;
    }
    .field.full,
    .full{
        grid-column:auto!important;
    }
    .m-floating-guide{
        bottom:12px!important;
    }
    .v24-notification-panel{
        position:fixed;
        top:78px;
        left:12px!important;
        right:12px!important;
        width:auto!important;
        max-height:70vh;
        overflow:auto;
    }
}