/* ==========================================================
   KRILIH.MA
   css/header-notifications.css
   VERSION V24 — GLASS GRAY
   ----------------------------------------------------------
   Notifications uniquement.
   Compatible header.css V24
   ========================================================== */


/* ==========================================================
   CONTAINER
========================================================== */

.header-notifications {

    position:
        relative;
}


/* ==========================================================
   AUTH
========================================================== */

.header-notifications[hidden] {

    display:
        none !important;
}


/* ==========================================================
   DROPDOWN
========================================================== */

.notifications-dropdown {

    position:
        absolute;

    top:
        calc(100% + 12px);

    right:
        0;

    width:
        380px;

    max-width:
        calc(100vw - 20px);

    max-height:
        530px;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid rgba(255,255,255,.90);

    border-radius:
        18px;

    background:
        rgba(238,240,242,.94);

    box-shadow:
        0 24px 65px rgba(31,41,55,.18);

    backdrop-filter:
        blur(26px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(26px)
        saturate(125%);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateY(-8px)
        scale(.98);

    transition:
        opacity .20s ease,
        visibility .20s ease,
        transform .20s ease;

    z-index:
        999999;
}


/* ==========================================================
   OPEN
========================================================== */

.header-notifications.open
.notifications-dropdown,
.notifications-dropdown.open,
.notifications-dropdown.active {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateY(0)
        scale(1);
}


/* ==========================================================
   HEADER
========================================================== */

.notifications-header {

    min-height:
        62px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        0 16px;

    background:
        rgba(255,255,255,.48);

    border-bottom:
        1px solid rgba(31,41,55,.08);
}


/* ==========================================================
   TITLE
========================================================== */

.notifications-title {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-width:
        0;
}


.notifications-title-icon {

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            rgba(22,163,74,.15),
            rgba(249,115,22,.15)
        );

    color:
        #16a34a;

    font-size:
        13px;
}


.notifications-header strong {

    color:
        #20252b;

    font-size:
        14px;

    font-weight:
        900;
}


/* ==========================================================
   MARK ALL
========================================================== */

.notifications-mark-all {

    flex-shrink:
        0;

    border:
        1px solid rgba(22,163,74,.14);

    padding:
        7px 10px;

    border-radius:
        9px;

    background:
        rgba(22,163,74,.08);

    color:
        #15803d;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        .2s ease;
}


.notifications-mark-all:hover {

    background:
        rgba(22,163,74,.14);

    transform:
        translateY(-1px);
}


/* ==========================================================
   LIST
========================================================== */

.notifications-list {

    width:
        100%;

    max-height:
        405px;

    overflow-y:
        auto;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(107,114,128,.35)
        transparent;
}


.notifications-list::-webkit-scrollbar {

    width:
        5px;
}


.notifications-list::-webkit-scrollbar-track {

    background:
        transparent;
}


.notifications-list::-webkit-scrollbar-thumb {

    background:
        rgba(107,114,128,.30);

    border-radius:
        999px;
}


/* ==========================================================
   ITEM
========================================================== */

.notification-item {

    position:
        relative;

    display:
        flex;

    gap:
        11px;

    width:
        100%;

    padding:
        13px 15px;

    background:
        rgba(255,255,255,.28);

    border-bottom:
        1px solid rgba(31,41,55,.055);

    cursor:
        pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.notification-item:hover {

    background:
        rgba(255,255,255,.65);

    transform:
        translateX(2px);
}


.notification-item.unread {

    background:
        rgba(22,163,74,.065);
}


.notification-item.unread::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    bottom:
        0;

    width:
        3px;

    background:
        linear-gradient(
            180deg,
            #16a34a,
            #f97316
        );
}


/* ==========================================================
   ICON
========================================================== */

.notification-icon {

    width:
        39px;

    height:
        39px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        rgba(22,163,74,.11);

    color:
        #16a34a;

    font-size:
        14px;
}


/* ==========================================================
   CONTENT
========================================================== */

.notification-content {

    flex:
        1;

    min-width:
        0;
}


.notification-title {

    margin-bottom:
        3px;

    color:
        #20252b;

    font-size:
        12px;

    line-height:
        1.35;

    font-weight:
        800;
}


.notification-message {

    color:
        #626a73;

    font-size:
        11px;

    line-height:
        1.45;
}


.notification-time {

    margin-top:
        5px;

    color:
        #9299a1;

    font-size:
        9px;
}


/* ==========================================================
   UNREAD DOT
========================================================== */

.notification-unread-dot {

    width:
        7px;

    height:
        7px;

    flex-shrink:
        0;

    margin-top:
        5px;

    border-radius:
        50%;

    background:
        #f97316;

    box-shadow:
        0 0 0 3px rgba(249,115,22,.10);
}


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

.notifications-loading {

    min-height:
        120px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    color:
        #8c949d;

    font-size:
        11px;
}


.notifications-loading i {

    color:
        #16a34a;
}


/* ==========================================================
   EMPTY
========================================================== */

.notifications-empty {

    min-height:
        160px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        25px;

    color:
        #8c949d;

    text-align:
        center;

    font-size:
        11px;
}


.notifications-empty i {

    width:
        50px;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background:
        rgba(22,163,74,.08);

    color:
        #16a34a;

    font-size:
        21px;
}


/* ==========================================================
   ERROR
========================================================== */

.notifications-error {

    padding:
        25px;

    color:
        #dc2626;

    text-align:
        center;

    font-size:
        11px;
}


/* ==========================================================
   FOOTER DU DROPDOWN
   ----------------------------------------------------------
   Ce n'est PAS le footer du site.
========================================================== */

.notifications-footer {

    min-height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 15px;

    border-top:
        1px solid rgba(31,41,55,.08);

    background:
        rgba(255,255,255,.42);

    color:
        #15803d;

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        800;

    transition:
        background .2s ease,
        color .2s ease;
}


.notifications-footer:hover {

    background:
        rgba(22,163,74,.08);

    color:
        #ea580c;
}


/* ==========================================================
   TYPES
========================================================== */

.notification-item[data-type="nouveau_message"]
.notification-icon {

    background:
        rgba(37,99,235,.10);

    color:
        #2563eb;
}


.notification-item[data-type="demande_location"]
.notification-icon {

    background:
        rgba(249,115,22,.12);

    color:
        #ea580c;
}


.notification-item[data-type="location_acceptee"]
.notification-icon {

    background:
        rgba(22,163,74,.12);

    color:
        #16a34a;
}


.notification-item[data-type="location_refusee"]
.notification-icon {

    background:
        rgba(239,68,68,.10);

    color:
        #dc2626;
}


.notification-item[data-type="location_annulee"]
.notification-icon {

    background:
        rgba(107,114,128,.10);

    color:
        #6b7280;
}


.notification-item[data-type="location_demarrage"]
.notification-icon {

    background:
        rgba(249,115,22,.11);

    color:
        #ea580c;
}


.notification-item[data-type="location_terminee"]
.notification-icon {

    background:
        rgba(22,163,74,.12);

    color:
        #16a34a;
}


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

@media (max-width: 600px) {

    .notifications-dropdown {

        position:
            fixed;

        top:
            calc(var(--kr-header-height) + 8px);

        left:
            8px;

        right:
            8px;

        width:
            auto;

        max-width:
            none;

        max-height:
            calc(100vh - 82px);

        border-radius:
            16px;
    }


    .notifications-list {

        max-height:
            calc(100vh - 205px);
    }


    .notifications-header {

        min-height:
            58px;

        padding:
            0 13px;
    }


    .notifications-title-icon {

        width:
            29px;

        height:
            29px;
    }


    .notifications-header strong {

        font-size:
            13px;
    }
}


/* ==========================================================
   ACCESSIBILITÉ
========================================================== */

.notifications-mark-all:focus-visible,
.notifications-footer:focus-visible {

    outline:
        2px solid #16a34a;

    outline-offset:
        3px;
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .notifications-dropdown,
    .notification-item,
    .notifications-mark-all {

        transition:
            none !important;
    }
}


/* ==========================================================
   DARK MODE
========================================================== */

html.dark .notifications-dropdown,
body.dark-mode .notifications-dropdown {

    background:
        rgba(35,39,43,.95);

    border-color:
        rgba(255,255,255,.10);
}


html.dark .notifications-header,
body.dark-mode .notifications-header {

    background:
        rgba(255,255,255,.04);

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


html.dark .notifications-header strong,
body.dark-mode .notifications-header strong {

    color:
        #f3f4f6;
}


html.dark .notification-item,
body.dark-mode .notification-item {

    background:
        rgba(255,255,255,.02);

    border-color:
        rgba(255,255,255,.06);
}


html.dark .notification-item:hover,
body.dark-mode .notification-item:hover {

    background:
        rgba(255,255,255,.07);
}


html.dark .notification-item.unread,
body.dark-mode .notification-item.unread {

    background:
        rgba(22,163,74,.09);
}


html.dark .notification-title,
body.dark-mode .notification-title {

    color:
        #f3f4f6;
}


html.dark .notification-message,
body.dark-mode .notification-message {

    color:
        #a1a1aa;
}


html.dark .notifications-footer,
body.dark-mode .notifications-footer {

    background:
        rgba(255,255,255,.03);

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