/* ═══════════════════════════════════════════════════════════════════
   CRN Notify — shared notification styles (all staff dashboards)
   Loaded via <link rel="stylesheet" href="/shared/crn-notify.css">
   ═══════════════════════════════════════════════════════════════════ */

/* ── Toast container — fixed bottom-right, grows upward ── */
#crn-pn-toasts{
  position:fixed;bottom:24px;right:24px;z-index:9997;
  display:flex;flex-direction:column;gap:10px;
  align-items:flex-end;pointer-events:none;
  max-height:calc(100vh - 56px);overflow:hidden;
}

/* ── Individual toast card ── */
.crn-pn-toast{
  pointer-events:all;width:348px;max-width:calc(100vw - 32px);
  background:var(--bg-2,#1e2030);border-radius:14px;
  box-shadow:0 16px 48px rgba(0,0,0,0.5),0 2px 8px rgba(0,0,0,0.3);
  overflow:hidden;opacity:0;
  transform:translateY(16px) scale(0.96);
  transition:opacity 0.32s cubic-bezier(0.4,0,0.2,1),
             transform 0.4s cubic-bezier(0.34,1.4,0.64,1);
}
.crn-pn-toast.crn-pn-in{opacity:1;transform:translateY(0) scale(1);}

/* Gradient bar — position:relative+overflow:hidden required for sweep animation */
.crn-pn-tbar{height:3px;position:relative;overflow:hidden;}

.crn-pn-tbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;}
.crn-pn-ttop{display:flex;align-items:flex-start;gap:10px;}

/* Icon tile — transitions for live color updates */
.crn-pn-ticon{
  width:34px;height:34px;border-radius:9px;border:1px solid;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px;
  transition:background 0.4s,border-color 0.4s,color 0.4s;
}
.crn-pn-ttext{flex:1;min-width:0;}

/* Title — single line, ellipsis; transition for live text fade */
.crn-pn-ttitle{
  font-size:13.5px;font-weight:700;color:var(--text,#cdd6f4);
  margin-bottom:3px;letter-spacing:-0.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity 0.18s;
}
/* Subtitle — up to 3 lines, then ellipsis */
.crn-pn-tsub{
  font-size:12px;color:var(--text-muted,#a6adc8);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
  transition:opacity 0.18s;
}
.crn-pn-tclose{
  width:26px;height:26px;border:none;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;color:var(--text-dim,#6c7086);
  padding:0;flex-shrink:0;transition:background 0.15s,color 0.15s;
}
.crn-pn-tclose:hover{background:var(--bg-3,#313244);color:var(--text,#cdd6f4);}

/* ── Full-width banner (inserted above .content, pushes layout down) ── */
.crn-pn-banner{
  flex-shrink:0;display:flex;flex-direction:column;
  background:var(--bg-2,#1e2030);border-bottom:1px solid var(--border,#313244);
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height 0.42s cubic-bezier(0.4,0,0.2,1),opacity 0.3s ease;
}
.crn-pn-banner.crn-pn-in{max-height:120px;opacity:1;}

/* Banner gradient bar — same sweep animation support */
.crn-pn-bbar{height:3px;flex-shrink:0;position:relative;overflow:hidden;}

.crn-pn-bbody{display:flex;align-items:center;gap:12px;padding:11px 22px;}
.crn-pn-bicon{
  width:32px;height:32px;border-radius:8px;border:1px solid;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background 0.4s,border-color 0.4s,color 0.4s;
}
.crn-pn-btext{flex:1;min-width:0;}
.crn-pn-btitle{
  font-weight:600;color:var(--text,#cdd6f4);font-size:13px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity 0.18s;
}
.crn-pn-bdesc{
  font-size:12px;color:var(--text-muted,#a6adc8);line-height:1.4;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity 0.18s;
}
.crn-pn-dismiss-btn{
  background:transparent;border:1px solid var(--border,#313244);
  color:var(--text-muted,#a6adc8);border-radius:6px;padding:5px 10px;
  cursor:pointer;font-size:11px;font-weight:500;flex-shrink:0;
  display:flex;align-items:center;gap:5px;line-height:1;
  transition:background 0.15s,color 0.15s,border-color 0.15s;
}
.crn-pn-dismiss-btn:hover{
  background:var(--bg-3,#313244);color:var(--text,#cdd6f4);
  border-color:var(--border-med,#45475a);
}

/* ── Mobile ── */
@media(max-width:600px){
  #crn-pn-toasts{bottom:12px;right:0;left:0;padding:0 12px;gap:8px;}
  .crn-pn-toast{width:auto;max-width:none;border-radius:10px;}
  .crn-pn-tbody{padding:12px 14px 14px;}
  .crn-pn-banner.crn-pn-in{max-height:180px;}
  .crn-pn-bbody{padding:9px 14px;gap:9px;}
}
@media(max-width:400px){
  .crn-pn-ticon{width:28px;height:28px;border-radius:7px;}
  .crn-pn-bicon{width:26px;height:26px;border-radius:6px;}
  .crn-pn-ttitle{font-size:12.5px;}
  .crn-pn-tsub,.crn-pn-bdesc{font-size:11.5px;}
  .crn-pn-btitle{font-size:12px;}
  .crn-pn-bbody{flex-wrap:wrap;}
  .crn-pn-btext{flex-basis:100%;min-width:0;}
}