/* Komponen fitur live: lonceng notifikasi, indikator Live, peta pelacakan. Dimuat setelah ui.css. */
.live-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600;background:var(--ok-bg,#e6f4ec);color:var(--ok,#17794a);white-space:nowrap}
.live-pill i{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;animation:lvpulse 1.8s ease-in-out infinite}
.live-pill[data-state=off]{background:#eceff3;color:#6b7686}.live-pill[data-state=off] i{animation:none}
.live-pill[data-state=wait]{background:var(--warn-bg,#fdf1d6);color:var(--warn,#8a5a00)}
.live-pill[hidden]{display:none}
@keyframes lvpulse{0%,100%{opacity:1}50%{opacity:.25}}
.live-flash{animation:lvflash 1.8s ease-out}
@keyframes lvflash{from{background-color:color-mix(in srgb,var(--c-primary,#2563eb) 18%,transparent)}to{background-color:transparent}}

/* Notifikasi */
.notif{position:relative}
.notif .icon-btn{position:relative;width:2.25rem;height:2.25rem;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:6px;color:var(--ink-2,#4a5565);cursor:pointer}
.notif .icon-btn:hover{background:#f1f3f6}
.notif .dot{position:absolute;top:.1rem;right:.05rem;min-width:1.05rem;height:1.05rem;padding:0 .25rem;border-radius:999px;background:var(--bad,#b3261e);color:#fff;font-size:.65rem;font-weight:700;line-height:1.05rem;text-align:center}
.notif .dot[hidden]{display:none}
.notif-panel{position:absolute;right:0;top:calc(100% + .45rem);z-index:70;width:23rem;max-width:calc(100vw - 1rem);background:var(--panel,#fff);border:1px solid var(--line,#e2e5ea);border-radius:8px;box-shadow:0 12px 32px rgba(15,23,42,.16);overflow:hidden;color:var(--ink,#1c2430)}
.notif-panel[hidden]{display:none}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.65rem .85rem;border-bottom:1px solid var(--line-soft,#eceff3);font-size:.9rem}
.notif-link{border:0;background:none;color:var(--c-primary,#2563eb);font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;padding:.2rem}
.notif-link[hidden]{display:none}
.notif-list{list-style:none;margin:0;padding:0;max-height:min(26rem,65vh);overflow-y:auto}
.notif-item,.notif-row{display:flex;gap:.65rem;align-items:flex-start;padding:.65rem .85rem;text-decoration:none;color:inherit;border-bottom:1px solid var(--line-soft,#eceff3);position:relative}
.notif-item:hover,.notif-row:hover{background:#f6f8fa}
.notif-item.is-unread,.notif-row.is-unread{background:color-mix(in srgb,var(--c-primary,#2563eb) 6%,#fff)}
.notif-ico{flex:0 0 auto;width:1.9rem;height:1.9rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#f1f3f6}
.notif-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0;font-size:.82rem;line-height:1.35}
.notif-txt b{font-weight:600;font-size:.86rem}
.notif-body{color:var(--ink-2,#4a5565);overflow-wrap:anywhere}
.notif-txt time{color:var(--muted,#6b7686);font-size:.74rem}
.notif-unread{flex:0 0 auto;width:.55rem;height:.55rem;border-radius:50%;background:var(--c-primary,#2563eb);margin:.35rem 0 0 auto}
.notif-empty{margin:0;padding:1.4rem .85rem;text-align:center;color:var(--muted,#6b7686);font-size:.85rem}
.notif-empty[hidden]{display:none}
.notif-all{display:block;padding:.7rem;text-align:center;font-size:.84rem;font-weight:600;color:var(--c-primary,#2563eb);text-decoration:none;border-top:1px solid var(--line-soft,#eceff3);background:#fafbfc}
.notif-all:hover{background:#f1f3f6}
.notif-page{list-style:none;margin:0;padding:0}
.notif-page .notif-row{padding:.8rem 1rem}
@media (max-width:639px){.notif{position:static}.notif-panel{position:fixed;left:.5rem;right:.5rem;top:3.6rem;width:auto;max-width:none}}

/* Peta pelacakan */
.track-map{height:22rem;width:100%;background:#e8edf2;position:relative;z-index:0}
@media (max-width:639px){.track-map{height:18rem}}
.trk-pin{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:opacity .3s}
.trk-courier{background:var(--c-primary,#2563eb)}
.trk-school{background:#17794a;border-radius:8px}
.trk-office{background:#8a5a00;border-radius:8px}
.leaflet-marker-icon:has(.trk-courier){transition:transform 1s linear}
.is-stale .trk-pin{opacity:.45}
.trk-empty{position:absolute;left:50%;bottom:.8rem;transform:translateX(-50%);z-index:500;background:rgba(255,255,255,.95);padding:.4rem .8rem;border-radius:999px;font-size:.8rem;box-shadow:0 2px 8px rgba(0,0,0,.2);white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.trk-empty[hidden]{display:none}
.trk-fit{background:#fff;border:2px solid rgba(0,0,0,.25);border-radius:4px;padding:.3rem .6rem;font-size:.78rem;font-weight:600;cursor:pointer}
.trk-pop{font-size:.82rem;line-height:1.4}.trk-ago{color:#6b7686}
.track-list{list-style:none;margin:0;padding:0}
.track-list:empty{display:none}
.track-list li{display:flex;flex-direction:column;padding:.55rem 1rem;border-top:1px solid var(--line-soft,#eceff3);font-size:.84rem}
.track-list li span{color:var(--muted,#6b7686);font-size:.78rem}