:root {
  --prinqo-blue: #0000FF;
  --prinqo-blue-dark: #0000CC;
  --prinqo-blue-light: #E5E5FF;
  --sidebar-width: 260px;
  --bg: #F4F5FA;
  --text: #1B1E2B;
  --text-muted: #6B7280;
  --border: #E4E6EF;
  --danger: #E53E3E;
  --success: #16A34A;
  --warning: #D97706;
}

* { box-sizing: border-box; }

/* §curseur pointer garanti sur tout élément cliquable, quel que soit le
   style inline ou la classe utilisée — pour toujours reconnaître un bouton
   au survol, même sans classe .btn explicite. */
a, button, .btn, [role="button"], input[type="submit"], input[type="button"],
.sidebar-link, .action-icon-btn, .topbar-icon-btn, .sort-toggle,
a.kpi-card, .kpi-card-solid, .flash-toast {
  cursor: pointer !important;
}
button:disabled, input:disabled, .btn:disabled {
  cursor: not-allowed !important;
}

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { text-decoration: none; color: inherit; }

/* ---------- LOGIN ---------- */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--prinqo-blue) 0%, #4B4BFF 100%);
}
.login-card {
  background: #fff;
  width: 100%;
  max-width: 380px;
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.login-logo {
  text-align: center;
  margin-bottom: 24px;
}
.login-logo .brand {
  font-size: 28px;
  font-weight: 800;
  color: var(--prinqo-blue);
  letter-spacing: 1px;
}
.login-logo .subtitle {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin-top: 2px;
}
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.form-control {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.form-control:focus { border-color: var(--prinqo-blue); }
.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.btn-primary { background: var(--prinqo-blue); color: #fff; }
.btn-primary:hover { background: var(--prinqo-blue-dark); }
.btn-block { width: 100%; }
.alert {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}
.alert-danger { background: #FDEDEE; color: var(--danger); border: 1px solid #F7C9CC; }
.alert-success { background: #EAF7ED; color: var(--success); border: 1px solid #C3E9CB; }

/* §message flash flottant : reste visible sans avoir à remonter en haut de
   la page, même quand la position de défilement est préservée après une
   action (voir prinqoConfirmReadyStatus & co dans app.js). */
.flash-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 3000;
  max-width: 380px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  animation: prinqoToastIn .25s ease-out;
}
.flash-toast.prinqo-toast-out { animation: prinqoToastOut .25s ease-in forwards; }
@keyframes prinqoToastIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes prinqoToastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-12px); } }
@media (max-width: 600px) { .flash-toast { left: 12px; right: 12px; max-width: none; top: 12px; } }

/* ---------- APP SHELL ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  background: #0A0A23;
  color: #C7C9E0;
  flex-shrink: 0;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}
.sidebar-brand {
  padding: 0 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 16px;
}
.sidebar-brand .brand { font-size: 22px; font-weight: 800; color: #fff; }
.sidebar-brand .subtitle { font-size: 10px; letter-spacing: 2px; color: #8A8DBF; }

.sidebar-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6669A0;
  padding: 14px 24px 6px;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  font-size: 14px;
  color: #C7C9E0;
  border-left: 3px solid transparent;
}
.sidebar-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-link.active {
  background: rgba(0,0,255,.25);
  border-left-color: var(--prinqo-blue);
  color: #fff;
  font-weight: 600;
}

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: relative;
  z-index: 30;   /* au-dessus du contenu (planning, tableaux) pour que le panneau de notifications ne passe jamais dessous */
  height: 64px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}
.topbar-search {
  flex: 1;
  max-width: 420px;
}
.topbar-search input {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg);
}
.topbar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.topbar-user .role-badge {
  background: var(--prinqo-blue-light);
  color: var(--prinqo-blue);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.logout-link { color: var(--danger); font-weight: 600; font-size: 13px; }

.content { padding: 24px; }

.page-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.page-subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.kpi-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}
.kpi-card .kpi-label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.kpi-card .kpi-value { font-size: 26px; font-weight: 800; color: var(--prinqo-blue); }
a.kpi-card { display: block; text-decoration: none; color: inherit; transition: transform .1s, box-shadow .1s; cursor: pointer; }
a.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); border-color: var(--prinqo-blue); }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.card-title { font-size: 15px; font-weight: 700; margin: 0 0 14px; }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 2px solid var(--border);
}
.table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }

.badge { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; display: inline-block; }
.badge-blue { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }
.badge-success { background: var(--tint-green-bg); color: var(--tint-green-fg); }
.badge-warning { background: var(--tint-orange-bg); color: var(--tint-orange-fg); }
.badge-danger { background: var(--tint-red-bg); color: var(--tint-red-fg); }
.badge-muted { background: var(--tint-gray-bg); color: var(--tint-gray-fg); }
.badge-purple { background: var(--tint-purple-bg); color: var(--tint-purple-fg); }

/* §8 : toute la ligne/carte change de couleur selon le statut, pas juste le badge */
.row-tint-muted   { background: #F5F5F5 !important; }
.row-tint-warning { background: #FEF3E2 !important; }
.row-tint-blue    { background: #E5E5FF !important; }
.row-tint-success { background: #EAF7ED !important; }
.row-tint-danger  { background: #FDEDEE !important; }
.row-tint-purple  { background: var(--tint-purple-bg) !important; }
tr.row-tint-muted td, tr.row-tint-warning td, tr.row-tint-blue td, tr.row-tint-success td, tr.row-tint-danger td { border-bottom-color: rgba(0,0,0,.06); }

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 13px;
}

@media (max-width: 900px) {
  .sidebar { position: fixed; left: -260px; z-index: 40; height: 100%; transition: left .2s; }
  .sidebar.open { left: 0; }
  .sidebar-overlay {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 39;
  }
  .sidebar-overlay.open { display: block; }
  .app-shell { display: block; }
  .menu-toggle { display: inline-flex !important; }
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-search { display: none; }
  .topbar-user span:not(.role-badge):not(.role-pill) { display: none; }
  .topbar-user > div:first-of-type { display: none; } /* cache nom+rôle empilés sur mobile, garde l'avatar */
  .topbar-user a[href="change_password.php"], .topbar-user a.logout-link { display: none; }
  .content { padding: 14px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .kpi-card { padding: 12px; }
  .kpi-card .kpi-value { font-size: 20px; }
  .card { padding: 14px; }
  .page-title { font-size: 19px; }
  form div[style*="grid-template-columns:1fr 1fr"],
  form div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .btn, .form-control, select.form-control { font-size: 16px; } /* évite le zoom automatique iOS */
  .table-responsive table { min-width: 640px; }
}

@media (max-width: 480px) {
  .login-card { padding: 28px 20px; }
  .sidebar { width: 240px; left: -240px; }
}

/* Menu hamburger (masqué par défaut sur desktop) */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  content: '';
  display: block;
  width: 18px; height: 2px;
  background: var(--text);
  position: relative;
}
.menu-toggle span::before { position: absolute; top: -6px; }
.menu-toggle span::after { position: absolute; top: 6px; }

/* Tableaux scrollables horizontalement sur petit écran plutôt que cassés */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Cibles tactiles confortables pour l'atelier (tablette/smartphone) */
@media (pointer: coarse) {
  .sidebar-link { padding: 13px 24px; }
  .btn, button { min-height: 40px; }
}

/* =========================================================
   REFONTE VISUELLE — badges d'icônes colorés, cartes KPI avec
   icône, pilules de statut, mini graphiques (donut / barres)
   ========================================================= */

:root {
  --tint-blue-bg: #E8ECFE;   --tint-blue-fg: #4C6FFF;
  --tint-green-bg: #E3F7EC;  --tint-green-fg: #16A34A;
  --tint-orange-bg: #FEF0E0; --tint-orange-fg: #F0932B;
  --tint-purple-bg: #F1E9FE; --tint-purple-fg: #8B5CF6;
  --tint-red-bg: #FDEAEA;    --tint-red-fg: #E5484D;
  --tint-teal-bg: #E1F5F3;   --tint-teal-fg: #0F9C8E;
  --tint-gray-bg: #F0F1F3;   --tint-gray-fg: #6B7280;
}

.sidebar-link { display: flex; align-items: center; gap: 12px; }
.sidebar-link svg { flex-shrink: 0; opacity: .85; }
.sidebar-link.active svg { opacity: 1; }

.icon-badge {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-badge.blue   { background: var(--tint-blue-bg);   color: var(--tint-blue-fg); }
.icon-badge.green  { background: var(--tint-green-bg);  color: var(--tint-green-fg); }
.icon-badge.orange { background: var(--tint-orange-bg); color: var(--tint-orange-fg); }
.icon-badge.purple { background: var(--tint-purple-bg); color: var(--tint-purple-fg); }
.icon-badge.red    { background: var(--tint-red-bg);    color: var(--tint-red-fg); }
.icon-badge.teal   { background: var(--tint-teal-bg);   color: var(--tint-teal-fg); }
.icon-badge.gray   { background: var(--tint-gray-bg);   color: var(--tint-gray-fg); }

.kpi-card-v2 {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s;
}
.kpi-card-v2:hover { box-shadow: 0 6px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
.kpi-card-v2 .kpi-body { min-width: 0; }
.kpi-card-v2 .kpi-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; white-space: nowrap; }
.kpi-card-v2 .kpi-value { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.1; }
.kpi-card-v2 .kpi-trend { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.kpi-card-v2 .kpi-trend.up { color: var(--tint-green-fg); }
.kpi-card-v2 .kpi-trend.down { color: var(--tint-red-fg); }

.kpi-grid-v2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; margin-bottom: 16px;
}

/* 2 colonnes sur PC, repli automatique en 1 colonne sur petit écran */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; margin-bottom: 20px; }
.grid-2col > .card { height: 100%; }
@media (max-width: 900px) { .grid-2col { grid-template-columns: 1fr; } }

/* Cases KPI en fond plein coloré — plus visibles qu'une simple icône colorée */
.kpi-card-solid {
  border-radius: 14px; padding: 18px; text-decoration: none; color: #fff;
  display: flex; flex-direction: column; gap: 4px; transition: transform .15s, box-shadow .15s;
}
.kpi-card-solid:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.15); }
.kpi-card-solid .kpi-solid-icon { opacity: .9; margin-bottom: 6px; }
.kpi-card-solid .kpi-label { font-size: 12px; color: rgba(255,255,255,0.85); }
.kpi-card-solid .kpi-value { font-size: 24px; font-weight: 800; color: #fff; }
.kpi-solid-blue   { background: var(--tint-blue-fg); }
.kpi-solid-orange { background: var(--tint-orange-fg); }
.kpi-solid-purple { background: var(--tint-purple-fg); }
.kpi-solid-red    { background: var(--tint-red-fg); }
.kpi-solid-teal   { background: var(--tint-teal-fg); }
.kpi-solid-green  { background: var(--tint-green-fg); }
.kpi-solid-gray   { background: var(--tint-gray-fg); }

/* Pilules de statut (table "Commandes / projets en cours") */
.pill { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.pill.blue   { background: var(--tint-blue-bg);   color: var(--tint-blue-fg); }
.pill.green  { background: var(--tint-green-bg);  color: var(--tint-green-fg); }
.pill.orange { background: var(--tint-orange-bg); color: var(--tint-orange-fg); }
.pill.purple { background: var(--tint-purple-bg); color: var(--tint-purple-fg); }
.pill.red    { background: var(--tint-red-bg);    color: var(--tint-red-fg); }
.pill.gray   { background: var(--tint-gray-bg);   color: var(--tint-gray-fg); }

/* Barres horizontales colorées ("État des opérations") */
.hbar-row { display: grid; grid-template-columns: 110px 1fr 30px; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; }
.hbar-track { background: #F0F1F3; border-radius: 20px; height: 10px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 20px; }

/* Donut CSS pur (conic-gradient), sans dépendance JS */
.donut {
  width: 160px; height: 160px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.donut-hole {
  width: 96px; height: 96px; border-radius: 50%; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-hole .total-value { font-size: 24px; font-weight: 800; color: var(--text); }
.donut-hole .total-label { font-size: 11px; color: var(--text-muted); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; flex-shrink: 0; }

.topbar-icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
  background: #fff; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); position: relative; flex-shrink: 0; text-decoration: none;
}
.topbar-icon-btn:hover { background: var(--bg); }
.topbar-badge {
  position: absolute; top: -5px; right: -5px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 10px; min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.avatar-circle {
  width: 38px; height: 38px; border-radius: 50%; background: var(--prinqo-blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.role-pill {
  background: var(--tint-blue-bg); color: var(--tint-blue-fg); font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; display: inline-block;
}
.action-icon-btn {
  width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
  color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.action-icon-btn:hover { background: var(--bg); }

/* =========================================================
   §26 (amendé) — listes longues : pas de pagination, une boîte
   scrollable avec recherche + inversion de tri. Utilisé pour
   Stock, Clients, Projets, Devis, Fournisseurs, Achats,
   Livraisons, Utilisateurs...
   ========================================================= */
.list-toolbar {
  display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap;
}
.list-toolbar input[type="text"], .list-toolbar input[type="search"] {
  flex: 1; min-width: 180px;
}
.list-toolbar .sort-toggle {
  background: #EEE; border: none; border-radius: 8px; padding: 10px 14px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.scroll-box {
  max-height: 520px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px;
}
.scroll-box table { margin: 0; }
.scroll-box thead th {
  position: sticky; top: 0; background: #fff; z-index: 1; box-shadow: 0 1px 0 var(--border);
}
.list-count { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }



/* ==========================================================
   Notifications (cloche) — changements de statut, nouveaux
   événements... Voir assets/js/notifications.js.
   ========================================================== */
.notif-bell-wrap { position: relative; flex-shrink: 0; }
.notif-bell {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
  background: #fff; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative;
}
.notif-bell:hover { background: var(--bg); }
.notif-bell svg { width: 20px; height: 20px; }
.notif-bell.notif-bell-secoue { animation: notif-secoue 0.5s ease; }
@keyframes notif-secoue {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(6deg); }
}
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  font-family: inherit;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.notif-badge-visible { display: flex; }

.notif-panel {
  display: none;
  position: absolute;
  top: 48px;
  right: 0;
  width: min(360px, 90vw);
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(24,24,24,0.22);
  z-index: 31;
}
.notif-panel-open { display: block; }
.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  /* z-index explicite : sans lui, l'en-tête (position:sticky) et les
     notifications de la liste (position:relative, pour leur pastille
     .notif-item-point) sont au même niveau d'empilement (z-index:auto) et
     sont alors peints dans l'ordre du DOM — la liste, qui vient après dans
     le HTML, passait donc PAR-DESSUS l'en-tête (et son interrupteur ON/OFF)
     au défilement au lieu de rester dessous. */
  z-index: 2;
  background: #fff;
}
.notif-panel-header h4 { margin: 0; font-size: 14px; }
.notif-panel-header-boutons { display: flex; align-items: center; gap: 4px; }
.notif-panel-header button {
  background: none;
  border: none;
  color: var(--prinqo-blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px;
  white-space: nowrap;
}
#notif-effacer-tout { color: var(--danger); }
/* Interrupteur « Notifications push » — juste le bouton, sans texte : vert
   avec une icône cloche quand activé, gris avec une cloche barrée quand
   coupé. Voir push_subscribe.php (push_etat / push_toggle) et
   assets/js/notifications.js. En grand format (notif-push-toggle-grand) et
   à gauche de l'en-tête du panneau : c'est l'action la plus fréquente sur
   téléphone (couper le soir, réactiver le matin), donc une cible large et
   facile à atteindre au pouce plutôt qu'un petit interrupteur perdu à côté
   d'un texte. */
.notif-push-toggle {
  padding: 0 !important;
  line-height: 0;
  flex-shrink: 0;
}
.notif-push-switch {
  display: inline-flex;
  align-items: center;
  width: 34px;
  height: 20px;
  border-radius: 12px;
  position: relative;
  transition: background-color .18s ease;
}
.notif-push-switch-on { background: var(--success); }
.notif-push-switch-off { background: #d1d5db; }
.notif-push-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(24,24,24,0.3);
  transition: left .18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-push-switch-on .notif-push-knob { left: 16px; }
.notif-push-switch-off .notif-push-knob { left: 2px; }
.notif-push-knob svg { width: 10px; height: 10px; }
.notif-push-knob .icone-cloche-pleine { color: var(--success); display: block; }
.notif-push-knob .icone-cloche-barree { color: var(--text-muted); display: none; }
.notif-push-switch-off .notif-push-knob .icone-cloche-pleine { display: none; }
.notif-push-switch-off .notif-push-knob .icone-cloche-barree { display: block; }
.notif-push-toggle[disabled] { opacity: .5; cursor: default; }
/* Format agrandi : cible tactile confortable (zone cliquable ~48px de haut,
   au-delà des ~44px recommandés pour un pouce), avec un interrupteur
   nettement plus grand que le format compact ci-dessus. */
.notif-push-toggle-grand { padding: 10px 8px 10px 0 !important; margin: -10px 0 -10px -2px; }
.notif-push-toggle-grand .notif-push-switch { width: 52px; height: 30px; border-radius: 17px; }
.notif-push-toggle-grand .notif-push-knob { width: 24px; height: 24px; top: 3px; left: 3px; }
.notif-push-toggle-grand .notif-push-switch-on .notif-push-knob { left: 25px; }
.notif-push-toggle-grand .notif-push-switch-off .notif-push-knob { left: 3px; }
.notif-push-toggle-grand .notif-push-knob svg { width: 15px; height: 15px; }
/* Bannière expliquant l'état des notifications système du navigateur
   (autorisées / à activer / bloquées) — voir assets/js/notifications.js. */
.notif-permission-banner {
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
  background: rgba(232,163,61,0.1);
  color: var(--text);
}
.notif-permission-banner button {
  display: inline-block;
  margin-top: 6px;
  background: var(--prinqo-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.notif-permission-banner-bloquee { background: rgba(214,79,79,0.1); }
.notif-permission-banner-active { background: rgba(58,160,101,0.1); }
.notif-item {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg); }
.notif-item-non-lue { background: #eef4fb; }
/* Pastille colorée avec le nom de l'auteur de l'action (couleur différente
   par utilisateur, calculée côté serveur — voir couleur_utilisateur_hex()
   dans includes/helpers.php et rendreListe() dans notifications.js). */
.notif-item-auteur {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}
/* Ligne de contexte (« Nom de l'événement - Client »), entre la pastille de
   l'auteur et le titre — voir rendreListe() dans notifications.js. Absente
   (donc pas de gap superflu) pour les notifications sans événement. */
.notif-item-contexte { font-size: 11.5px; font-style: italic; color: var(--text-muted); margin-bottom: 2px; }
.notif-item-titre { font-size: 13px; font-weight: 600; color: var(--text); padding-right: 14px; }
.notif-item-message { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.notif-item-temps { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; font-family: inherit; }
.notif-item-point {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--prinqo-blue);
}
.notif-panel-empty { padding: 32px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }
.notif-panel-footer { padding: 10px 14px; text-align: center; border-top: 1px solid var(--border); }
.notif-panel-footer a { font-size: 12px; color: var(--prinqo-blue); font-weight: 600; }

@media (max-width: 900px) {
  /* Sur mobile, la barre du haut (logo + menu, maintenant fixe à une seule
     ligne) fait environ 50px de haut : la cloche descend sous cette barre
     pour ne plus jamais recouvrir le logo, quelle que soit la longueur du
     nom affiché. Elle reste en position fixe (visible en permanence),
     comme le menu qui reste maintenant collé en haut au défilement. */
}


@media (max-width: 640px) {
  .notif-bell-wrap { position: static; }
  .notif-panel { position: fixed; top: 60px; left: 8px; right: 8px; width: auto; max-height: 75vh; }
}