/* ==========================================================================
   Shared Notification Card stylesheet — bk-notif-* / bk-inbox-*
   --------------------------------------------------------------------------
   ONE shared look for the bell dropdown AND the My Inbox lists, so both
   surfaces render identical "Shared with me"-style rows.
   Modeled on `.si-shared*` in templates/workflow/step_inbox.html.

   Loaded in:
     - templates/admin/base_site.html              (admin shell)
     - templates/portal/base_staff.html            (staff portal)
     - templates/portal/base_client.html           (client portal)
     - templates/portal/base_supplier.html         (supplier portal)
     - templates/portal/base_material_supplier.html(material supplier portal)

   Brand tokens (with hex fallbacks):
     navy   #1a1a2e   teal  #2D7D7B   gold    #c29954   emerald #10B981
     red    #b71c1c   amber #c2691c   indigo  #4f46e5   grey    #6c757d
   ========================================================================== */

/* ── List container ─────────────────────────────────────────────────────── */
.bk-notif-list {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e4e8;
  border-radius: 10px;
  overflow: hidden;
  overflow-x: hidden; /* never let a long title force a horizontal scrollbar */
}

/* ── Row ────────────────────────────────────────────────────────────────── */
.bk-notif-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .9rem;
  cursor: pointer;
  text-decoration: none;
  color: #2d2d3a;
  border-bottom: 1px solid #f0f0f5;
}
.bk-notif-row:last-child { border-bottom: none; }
.bk-notif-row:hover { background: #f8f9fb; }

.bk-notif-row.is-unread { background: #f5f8ff; }
.bk-notif-row.is-unread:hover { background: #eef3ff; }
.bk-notif-row.is-read { opacity: .72; }

/* ── Pill ───────────────────────────────────────────────────────────────── */
.bk-notif-pill {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 9999px;
  color: #fff;
  background: #1a1a2e; /* navy — default */
  min-width: 62px;
  text-align: center;
}
.bk-notif-pill--step     { background: #2D7D7B; } /* teal    */
.bk-notif-pill--shared   { background: #c29954; } /* gold    */
.bk-notif-pill--approval { background: #c29954; } /* gold    */
.bk-notif-pill--update   { background: #1a1a2e; } /* navy    */
.bk-notif-pill--done     { background: #10B981; } /* emerald */
.bk-notif-pill--rejected { background: #b71c1c; } /* red     */
.bk-notif-pill--chat     { background: #2D7D7B; } /* teal    */
.bk-notif-pill--doc      { background: #b71c1c; } /* red     */
.bk-notif-pill--meeting  { background: #4f46e5; } /* indigo  */
.bk-notif-pill--system   { background: #6c757d; } /* grey    */
.bk-notif-pill--overdue  { background: #b71c1c; } /* red     */
.bk-notif-pill--progress { background: #2D7D7B; } /* teal    */
.bk-notif-pill--awaiting { background: #c29954; } /* gold    */
/* Shared-artifact kinds (My Inbox Shared/Archive tabs) */
.bk-notif-pill--card     { background: #c29954; } /* gold    */
.bk-notif-pill--pdf      { background: #b71c1c; } /* red     */
.bk-notif-pill--ppt      { background: #c2691c; } /* amber   */
.bk-notif-pill--snapshot { background: #2D7D7B; } /* teal    */

/* ── Body (title + meta) ────────────────────────────────────────────────── */
/* `display:block` is essential: the bell renderers build title/meta as inline
   <span>s (the My Inbox uses <div>s). Without it the two lines run together on
   one row and overflow horizontally (scrollbar). Block + ellipsis makes both
   surfaces stack identically. */
.bk-notif-body { flex: 1; min-width: 0; }
.bk-notif-title {
  display: block;
  font-size: .86rem;
  font-weight: 600;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-notif-meta {
  display: block;
  font-size: .72rem;
  color: #888;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Actions ────────────────────────────────────────────────────────────── */
.bk-notif-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.bk-notif-btn {
  font-size: .78rem;
  font-weight: 600;
  padding: .4rem .8rem;
  border-radius: 6px;
  text-decoration: none;
  background: #1a1a2e;
  color: #fff;
  border: none;
  cursor: pointer;
}
.bk-notif-btn:hover { background: #24243e; }
.bk-notif-btn--ghost {
  background: #fff;
  color: #1a1a2e;
  border: 1px solid #d1d1d9;
}
.bk-notif-btn--ghost:hover { background: #f4f5f7; }

/* ── Unread dot ─────────────────────────────────────────────────────────── */
.bk-notif-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2D7D7B; /* teal */
}
.bk-notif-row:not(.is-unread) .bk-notif-dot { visibility: hidden; }

/* ── My Inbox tabs ──────────────────────────────────────────────────────── */
.bk-inbox-tabs {
  display: flex;
  gap: 6px;
}
.bk-inbox-tab {
  padding: .5rem .9rem;
  border: none;
  background: none;
  font-size: .9rem;
  font-weight: 700;
  color: #888;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.bk-inbox-tab.active {
  color: #1a1a2e;
  border-bottom-color: #1a1a2e;
}
.bk-inbox-tab .bk-tab-count {
  background: #e7e9ef;
  color: #555;
  border-radius: 9999px;
  font-size: .7rem;
  padding: 1px 7px;
  margin-left: 5px;
}

/* ── Reduced motion (no-op; no transitions are used above) ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .bk-notif-row,
  .bk-notif-btn,
  .bk-inbox-tab { transition: none; }
}