/*
    Notification Style
*/

#notification-nav {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

li#notification_li {
    float: left;
    margin-right: 20px;
    font-size: 14px;
}

li#notification_li a {
}

li#li#notification_li a:hover {
    color: #006699;
    text-decoration: none
}

#notification_li {
    position: relative
}

#notificationContainer {
/*     background-color: #fff; */
/*     border: 1px solid #ddd; */
/*     -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25); */
/*     overflow: visible; */
/*     position: absolute; */
/*     top: 31px; */
/*     right: 0px; */
    /*margin-left: -170px;*/
/*     width: 400px; */
/*     max-height: 370px; */
/*     z-index: 100; */
/*     display: none; */
}

#notificationContainer:before {
/*     content: ''; */
/*     display: block; */
/*     position: absolute; */
/*     width: 0; */
/*     height: 0; */
/*     color: transparent; */
/*     border: 10px solid black; */
/*     border-color: transparent transparent white; */
/*     margin-top: -20px; */
/*     margin-left: 188px; */
}

#notificationTitle {
/*     z-index: 1000; */
/*     font-weight: bold; */
/*     padding: 8px; */
/*     font-size: 13px; */
/*     background-color: #ffffff; */
/*     width: 390px; */
/*     border-bottom: 1px solid #dddddd; */
}

#notificationsBody {
/* 	background-color: #ffffff; */
/*     padding: 0px 0px 0px 0px !important; */
/*     max-height: 300px; */
    overflow-y: scroll;
    max-height: 300px;
}

#notificationsBody > div{
/* 	border-bottom: 1px solid #dddddd; */
/* 	cursor: pointer; */
/* 	overflow: hidden; */
/* 	display: block; */
/* 	padding-top: 10px; */
/* 	padding-right: 10px; */
/* 	padding-left: 5px; */
/* 	padding-bottom : 5px; */
/* 	min-height: 60px;  */
}
#notificationsBody div a{
/* 	overflow: hidden; */
/* 	color: #333; */
/* 	text-decoration: none; */
/*     display: block; */
/*     padding: 15px; */
/*     min-height: 60px;     */
}

.notifications{
	position: relative !important;
}

#notificationFooter {
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    border-top: 1px solid #c5c5c5;
    background-color: #f6f7f8;
}

#notificationFooter a{
	display: block;
}

#notification_count {
	z-index: 105;
	position: absolute;
/*     background: #f44336; */
    padding: 1px 5px;
    border-radius: 2px;
    right: 2px;
    top: 2x;
    font-size: 10px;
    line-height: 15px;
    cursor: pointer;
    color: white;
}

/* =====================================================================
   Refonte notifications (cloche + page) — 2026-06 (Clément)
   Couleurs d'accent par type, état lu/non-lu, actions, regroupement.
   ===================================================================== */
:root{
  --notif-line:#e8eaf1; --notif-muted:#78829d; --notif-ink:#181c32;
  --notif-primary:#1b84ff; --notif-unread-bg:#f5f8ff; --notif-danger:#f56666;
  --notif-leave:#12b3a6; --notif-expense:#f7783b; --notif-ts:#6c5ce7;
  --notif-invoice:#2f9e44; --notif-bday:#e64980; --notif-project:#1f6feb;
  --notif-sales:#e8590c;
}

/* ---- neutralise le thème metronics sur le dropdown notifs (fond bleu, couleurs, paddings) ---- */
#notifications-header{ background:#fff !important; }
#header_notification_bar .notif-head .notif-title,
#header_notification_bar .notif-card .ni-msg{ color:var(--notif-ink) !important; }
#header_notification_bar .notif-card .notification-item small,
#header_notification_bar .notif-group{ color:var(--notif-muted) !important; }
#header_notification_bar .notif-card .ni-msg a{ color:var(--notif-primary) !important; }
.notif-card .notification-item{ border-bottom:0 !important; font-size:inherit; }
.notif-card .notification-item div{ padding:0 !important; }

/* badge cloche : pastille rouge lisible */
#notification_count{
  background:var(--notif-danger) !important; border-radius:9px !important;
  min-width:17px; height:17px; text-align:center; padding:0 4px !important;
  line-height:17px !important; font-weight:600; border:2px solid #fff; top:2px !important;
}

/* ---- dropdown cloche ---- */
#notifications-header{ width:406px !important; padding:0 !important; border-radius:10px !important; overflow:hidden; }
.notif-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--notif-line); }
.notif-head .notif-title{ font-weight:600; font-size:14.5px; color:var(--notif-ink); }
.notif-head .notif-title small{ color:var(--notif-muted); font-weight:500; font-size:12px; margin-left:6px; }
.notif-linkbtn{ background:none; border:0; color:var(--notif-primary) !important; font-weight:600; font-size:12.5px; cursor:pointer; padding:4px 6px; border-radius:var(--kt-border-radius-sm) !important; }
.notif-linkbtn:hover{ background:#e9f1ff; }

/* ---- chips de filtre (partagé cloche + page) ---- */
.notif-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:10px 14px; border-bottom:1px solid var(--notif-line); }
.notif-chip{ border:1px solid var(--notif-line); background:#fff; color:var(--notif-muted) !important; font-size:12px; font-weight:500; padding:6px 11px; border-radius:20px !important; cursor:pointer; white-space:nowrap; }
.notif-chip:hover{ background:#eef2f8; border-color:#cfd6e4; }
/* chip actif : fond sombre + texte blanc forcé (sinon #header_notification_bar * passe le texte en sombre -> noir sur noir) */
.notif-chip.on, #header_notification_bar .notif-chip.on{ background:var(--notif-ink) !important; color:#fff !important; border-color:var(--notif-ink) !important; }
.notif-chip.on:hover{ background:#23283a !important; }

/* ---- liste / scroller cloche ---- */
#notificationsBody{ overflow-y:auto; max-height:430px; padding:0 !important; }
#notificationsBody > div{ border:0 !important; }

/* ---- séparateurs de groupe par date : libellé + compteur centrés, traits de part et d'autre ---- */
.notif-group{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:11px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; color:var(--notif-muted); padding:11px 16px; background:#fafbfd; }
.notif-group::before, .notif-group::after{ content:""; flex:1; height:1px; background:var(--notif-line); }
.notif-group .gn{ background:#eef1f6; color:var(--notif-muted); border-radius:20px; padding:1px 8px; font-size:10.5px; margin-left:0; }

/* ---- carte notification (wrapper autour du HTML macro) ---- */
.notif-card{ position:relative; border-bottom:1px solid var(--notif-line); transition:background .12s; }
.notif-card:hover{ background:#f7f9fc; }
.notif-card.is-unread{ background:var(--notif-unread-bg); }
.notif-card.is-unread::before{ content:""; position:absolute; left:5px; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:var(--notif-primary); }
.notif-card .notification-item{ cursor:pointer; padding:11px 14px 11px 16px; display:flex; align-items:flex-start; gap:12px; }
.notif-card .ni-body{ flex:1; min-width:0; }
.notif-card .ni-msg{ font-size:13px; line-height:1.45; color:var(--notif-ink); word-wrap:break-word; }
.notif-card .ni-msg b{ font-weight:600; }
.notif-card .ni-msg a{ color:var(--notif-primary); text-decoration:none; font-weight:600; }
.notif-card .notification-item small{ display:block; margin-top:4px; font-size:11.5px; color:var(--notif-muted); }
.notif-card .ni-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex:0 0 auto; }

/* bulle d'icône : convention thème (span.iconp = conteneur flex centré), taille normalisée,
   couleur par catégorie (cercle via border-radius:100%) */
.notif-card .notif-bubble{ width:42px; height:42px; flex:0 0 auto; align-self:center; justify-content:center; border-radius:100% !important; line-height:1; }
.notif-card .notif-bubble i{ font-size:36px !important; color:#fff !important; line-height:1; }
/* couleurs alignées sur les domaines métier : sales / purchases / activity (workeffort) */
.notif-card[data-cat="sales"]     .notif-bubble,
.notif-card[data-cat="invoice"]   .notif-bubble{ background-color:var(--sales-color); }
.notif-card[data-cat="expense"]   .notif-bubble{ background-color:var(--purchases-color); }
.notif-card[data-cat="timesheet"] .notif-bubble,
.notif-card[data-cat="leave"]     .notif-bubble,
.notif-card[data-cat="project"]   .notif-bubble,
.notif-card[data-cat="birthday"]  .notif-bubble,
.notif-card[data-cat="other"]     .notif-bubble{ background-color:var(--workeffort-color); }

/* tag de catégorie injecté en JS : bords ronds comme les badges .status, couleurs domaine */
.notif-tag{ display:inline-block; font-size:10px; font-weight:600; padding:2px 8px; border-radius:var(--kt-border-radius) !important; text-transform:uppercase; letter-spacing:.3px; margin-right:6px; vertical-align:middle; }
.notif-tag.cat-sales, .notif-tag.cat-invoice{ color:var(--sales-color) !important; background:var(--sales-color-light); }
.notif-tag.cat-expense{ color:var(--purchases-color) !important; background:var(--purchases-color-light); }
.notif-tag.cat-timesheet, .notif-tag.cat-leave, .notif-tag.cat-project, .notif-tag.cat-birthday, .notif-tag.cat-other{ color:var(--workeffort-color) !important; background:var(--workeffort-color-light); }

/* actions au survol */
.notif-actions{ position:absolute; right:10px; top:9px; display:flex; gap:4px; opacity:0; transition:opacity .12s; }
.notif-card:hover .notif-actions{ opacity:1; }
.notif-actions button{ width:27px; height:27px; border-radius:var(--kt-border-radius-sm) !important; border:1px solid var(--notif-line); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--notif-muted); }
.notif-actions button:hover{ border-color:#cfd6e4; color:var(--notif-ink); }
.notif-actions button i{ font-size:12px !important; width:auto !important; height:auto !important; background:none !important; color:inherit !important; line-height:1 !important; }

/* footer cloche */
.notif-foot{ padding:10px 16px; border-top:1px solid var(--notif-line); text-align:center; background:#fff; }
.notif-foot a, #header_notification_bar .notif-foot a{ display:inline-block; color:var(--notif-primary) !important; font-weight:600; font-size:13px; text-decoration:none; background:none !important; padding:0; }
/* pas de boîte au survol : juste le lien souligné */
.notif-foot a:hover, #header_notification_bar .notif-foot a:hover{ background:none !important; color:var(--notif-primary) !important; text-decoration:underline; }

/* ---- page complète "Notifications reçues" ---- */
.notif-page{ background:#fff; border:1px solid var(--notif-line); border-radius:var(--kt-border-radius) !important; overflow:hidden; max-width:860px; margin:18px auto; }
.notif-pager{ padding:14px 20px; display:flex; align-items:center; justify-content:center; gap:14px; }
.notif-page-info{ color:var(--notif-muted); font-size:12.5px; font-weight:600; min-width:90px; text-align:center; }
.notif-btn[disabled]{ opacity:.45; cursor:default; pointer-events:none; }
.notif-page-head{ padding:16px 20px; border-bottom:1px solid var(--notif-line); display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.notif-page-head h2{ margin:0; font-size:16px; font-weight:600; }
.notif-page-head .notif-count{ color:var(--notif-muted); font-size:12.5px; font-weight:500; }
/* champ recherche : la BOÎTE (conteneur flex) porte bordure/rayon/hauteur ; l'input est transparent
   et sans style -> neutralise le style input du thème, loupe à gauche sans chevauchement, taille maîtrisée */
.notif-search{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; background:#fff; border:1px solid var(--notif-line); border-radius:var(--kt-border-radius) !important; }
.notif-search:focus-within{ border-color:var(--notif-primary); }
.notif-search .fa{ flex:0 0 auto; color:var(--notif-muted); font-size:13px; }
.notif-search input[type=text]{ flex:1; min-width:0; height:100% !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; font-size:13px; outline:none; }
/* au focus, c'est le conteneur (:focus-within) qui réagit -> on neutralise le contour propre de l'input (règle :focus du thème) */
.notif-search input[type=text]:focus{ border:0 !important; box-shadow:none !important; outline:none !important; background:transparent !important; }
/* bouton effacer (à droite), affiché par JS quand il y a une saisie */
.notif-search-clear{ flex:0 0 auto; border:0 !important; background:none !important; color:var(--notif-muted); cursor:pointer; font-size:18px; line-height:1; padding:0 2px !important; }
.notif-search-clear:hover{ color:var(--notif-ink); background:none !important; }
.notif-toolbar{ display:flex; gap:8px; align-items:center; padding:11px 20px; border-bottom:1px solid var(--notif-line); flex-wrap:wrap; background:#fafbfd; }
.notif-btn{ border:1px solid var(--notif-line); background:#fff; border-radius:var(--kt-border-radius) !important; padding:8px 13px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:7px; color:var(--notif-ink); }
.notif-empty{ padding:34px 20px; text-align:center; color:var(--notif-muted); font-size:13px; }
.notif-btn:hover{ background:#eef2f8 !important; color:var(--notif-ink) !important; border-color:#cfd6e4; }
.notif-btn i{ color:inherit !important; background:none !important; }
.notif-page .notif-group{ background:#fff; border-bottom:1px solid var(--notif-line); padding:13px 20px 9px; }
.notif-page .notif-card .notification-item{ padding:12px 20px 12px 24px; }

/* =====================================================================
   Responsive — popover cloche + page seeAllNotifications
   ===================================================================== */
@media (max-width:560px){
  /* le popover devient un panneau quasi pleine largeur, ancré sous la barre */
  #notifications-header{
    position:fixed !important; top:54px !important; left:2vw !important; right:2vw !important;
    width:96vw !important; max-width:96vw !important;
  }
  #notificationsBody{ max-height:62vh; }
  .notif-chips{ padding:9px 12px; }
}
@media (max-width:640px){
  /* l'encart parent (décorateur) suffit : pas de 2e bordure/rayon ni de marges latérales */
  .notif-page{ margin:0; border:0 !important; border-radius:0 !important; }
  .notif-page-head{ padding:12px 14px; gap:10px; }
  .notif-page-head h2{ font-size:15px; }
  .notif-search{ order:3; flex:1 0 100%; min-width:0; }
  .notif-toolbar{ padding:10px 14px; gap:7px; }
  .notif-toolbar .notif-btn{ padding:7px 10px; font-size:12px; }
  .notif-page .notif-card .notification-item{ padding:12px 14px; }
  .notif-page .notif-group{ padding:11px 14px 6px; }
  .notif-pager{ flex-wrap:wrap; gap:10px; }
}