/* ============================================================
   GRIFFITH FOODS — Shared Navigation Styles
   Used by: index.html, search-results.html, upload-data.html
   ============================================================ */

/* ── Shared backdrop ───────────────────────────────────── */
.backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0);
  z-index:299;pointer-events:none;transition:background .25s;
}
.backdrop.visible{background:rgba(0,0,0,.55);pointer-events:auto}

/* ── Shared drawer base ────────────────────────────────── */
.drawer{
  position:fixed;top:0;right:0;bottom:0;
  background:var(--surf1);border-left:1px solid var(--bdr);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.drawer.open{transform:translateX(0)}

/* ── Shared drawer header ──────────────────────────────── */
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 20px;flex-shrink:0;
  border-bottom:1px solid var(--bdr);
}
.drawer-close{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;
  background:none;border:none;cursor:pointer;
  color:var(--txt2);font-size:18px;flex-shrink:0;
  transition:background .15s,color .15s;
}
.drawer-close:hover{background:var(--surf2);color:var(--txt)}

/* ══════════════════════════════════════════════════════════
   SIDEBAR DRAWER
══════════════════════════════════════════════════════════ */
#sb-drawer{width:256px;z-index:301}

.sb-brand{display:flex;align-items:center;gap:10px}
.sb-brand img{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.sb-brand-name{font-size:13px;font-weight:600;color:var(--txt)}

.sb-nav{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:8px 0;display:flex;flex-direction:column;
}
.sb-nav::-webkit-scrollbar{width:2px}
.sb-nav::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px}

.sb-section{
  font-size:10px;font-weight:600;letter-spacing:.08em;
  color:var(--txt-mute);text-transform:uppercase;
  padding:10px 20px 4px;white-space:nowrap;
}
.sb-item{
  display:flex;align-items:center;gap:12px;
  height:44px;padding:0 20px;
  background:none;border:none;cursor:pointer;
  color:var(--txt2);text-decoration:none;
  font-family:var(--font);font-size:14px;font-weight:400;
  white-space:nowrap;overflow:hidden;width:100%;
  transition:background .15s,color .15s;
  position:relative;flex-shrink:0;
}
.sb-item:hover{background:var(--surf2);color:var(--txt)}
.sb-item.active{background:var(--surf2);color:var(--txt)}
.sb-item.active::before{
  content:'';position:absolute;
  right:0;top:8px;bottom:8px;width:3px;
  background:var(--brand-ring);border-radius:3px 0 0 3px;
}
.sb-icon{
  width:20px;height:20px;font-size:20px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.sb-badge{
  margin-left:auto;flex-shrink:0;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--brand);color:#fff;
  font-size:10px;font-weight:600;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}
.sb-divider{height:1px;background:var(--bdr);margin:8px 0;flex-shrink:0}
.sb-foot{border-top:1px solid var(--bdr);padding:8px 0;flex-shrink:0}
.sb-user{display:flex;align-items:center;gap:12px;padding:0 14px;height:52px}
.sb-avatar{
  width:32px;height:32px;border-radius:8px;
  background:var(--brand);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;
}
.sb-user-name{font-size:13px;font-weight:500;color:var(--txt)}
.sb-user-role{font-size:11px;color:var(--txt-mute)}

/* ══════════════════════════════════════════════════════════
   NOTIFICATION DRAWER
══════════════════════════════════════════════════════════ */
#notif-drawer{width:360px;z-index:301}

.notif-head-left{display:flex;align-items:center;gap:10px}
.notif-head-title{font-size:15px;font-weight:600;color:var(--txt)}
.notif-unread-count{
  min-width:20px;height:20px;padding:0 6px;
  background:var(--error);color:#fff;
  font-size:11px;font-weight:600;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
}
.notif-head-right{display:flex;align-items:center;gap:8px}
.notif-clear-all{
  background:none;border:none;cursor:pointer;
  font-family:var(--font);font-size:12px;font-weight:500;
  color:var(--txt-mute);padding:4px 8px;border-radius:6px;
  transition:color .15s,background .15s;white-space:nowrap;
}
.notif-clear-all:hover{color:var(--error);background:rgba(239,68,68,.08)}

.notif-list{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:8px 0;display:flex;flex-direction:column;
}
.notif-list::-webkit-scrollbar{width:2px}
.notif-list::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px}

.notif-empty{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  padding:48px 24px;color:var(--txt-mute);
  font-size:14px;text-align:center;
}
.notif-empty i{font-size:32px;opacity:.4}

.notif-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 20px;
  border-bottom:1px solid var(--bdr-sub);
  position:relative;transition:background .15s;
}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:rgba(255,255,255,.025)}
.notif-item.unread{background:rgba(255,255,255,.02)}
.notif-item.unread::before{
  content:'';position:absolute;left:8px;top:20px;
  width:5px;height:5px;border-radius:50%;
  background:var(--brand-ring);
}
.notif-type-icon{
  width:36px;height:36px;border-radius:8px;flex-shrink:0;margin-top:1px;
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.notif-type-icon.info   {background:rgba(59,130,246,.15); color:var(--info)}
.notif-type-icon.success{background:rgba(16,185,129,.15); color:var(--success)}
.notif-type-icon.warning{background:rgba(245,158,11,.15); color:var(--warning)}
.notif-type-icon.error  {background:rgba(239,68,68,.15);  color:var(--error)}

.notif-body{flex:1;min-width:0}
.notif-title{font-size:13px;font-weight:600;color:var(--txt);margin-bottom:2px;line-height:1.4}
.notif-msg{font-size:12px;color:var(--txt2);line-height:1.5;margin-bottom:6px}
.notif-time{font-size:11px;color:var(--txt-mute)}

.notif-dismiss{
  background:none;border:none;cursor:pointer;
  color:var(--txt-mute);font-size:14px;padding:2px;
  border-radius:4px;flex-shrink:0;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;
  transition:color .15s,background .15s;
  opacity:0;
}
.notif-item:hover .notif-dismiss{opacity:1}
.notif-dismiss:hover{color:var(--error);background:rgba(239,68,68,.1)}

/* Bell badge */
.bell-wrap{position:relative;display:inline-flex}
.bell-badge{
  position:absolute;top:-3px;right:-4px;
  min-width:16px;height:16px;padding:0 4px;
  background:var(--error);color:#fff;
  font-size:9px;font-weight:700;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);pointer-events:none;
}
.bell-badge.hidden{display:none}

/* ══════════════════════════════════════════════════════════
   VOICE MODAL
══════════════════════════════════════════════════════════ */
.voice-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  z-index:400;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.voice-backdrop.active{opacity:1;pointer-events:auto}
.voice-modal{
  background:var(--surf1);border:1px solid var(--bdr);border-radius:16px;
  padding:40px 48px;display:flex;flex-direction:column;align-items:center;gap:24px;
  width:380px;transform:translateY(12px);transition:transform .2s;
}
.voice-backdrop.active .voice-modal{transform:translateY(0)}
.voice-ring-wrap{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
.voice-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--brand-ring);opacity:0;transform:scale(1)}
.voice-backdrop.active.listening .voice-ring.r1{animation:ring-pulse 1.8s ease-out infinite}
.voice-backdrop.active.listening .voice-ring.r2{animation:ring-pulse 1.8s ease-out .4s infinite}
.voice-backdrop.active.listening .voice-ring.r3{animation:ring-pulse 1.8s ease-out .8s infinite}
@keyframes ring-pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2)}}
.voice-btn{
  width:72px;height:72px;border-radius:50%;
  background:var(--brand);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:28px;
  transition:background .2s,transform .15s;
  position:relative;z-index:1;
}
.voice-btn:hover{background:var(--brand-h);transform:scale(1.05)}
.voice-backdrop.active.listening .voice-btn{background:var(--error);animation:mic-beat 1.2s ease-in-out infinite}
@keyframes mic-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.voice-status{font-size:14px;font-weight:500;color:var(--txt2);text-align:center;min-height:20px}
.voice-backdrop.active.listening .voice-status{color:var(--brand-ring)}
.voice-transcript{
  width:100%;min-height:52px;
  background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;
  padding:12px 16px;font-size:14px;color:var(--txt);line-height:1.6;word-break:break-word;
}
.voice-transcript.empty{color:var(--txt-mute);font-style:italic}
.voice-footer{display:flex;align-items:center;gap:12px;width:100%}
.voice-cancel{
  flex:1;height:40px;border-radius:8px;
  background:none;border:1px solid var(--bdr);
  color:var(--txt2);font-family:var(--font);font-size:14px;cursor:pointer;
  transition:all .15s;
}
.voice-cancel:hover{background:var(--surf2);color:var(--txt)}
.voice-use{
  flex:1;height:40px;border-radius:8px;
  background:var(--brand);border:none;
  color:#fff;font-family:var(--font);font-size:14px;font-weight:500;
  cursor:pointer;transition:background .15s;display:none;
}
.voice-use.show{display:block}
.voice-use:hover{background:var(--brand-h)}