/* ==========================================================================
   Phoenix Core prototypes — component layer
   --------------------------------------------------------------------------
   One block per component. Every value should resolve to a token in
   tokens.css; a raw value here is a signal that something needs tokenising.

   Contents
     1. topbar          navigation-topbar (Figma 149:2174)
     2. ncard           notification card — shared by toast + list
     3. toast-stack     heads-up stack + clear-all bar
     4. sheet           right-hand notification panel
     5. snackbar        in-sheet arrival notice
   ========================================================================== */


/* == 1. Topbar ============================================================
   Figma: navigation-topbar, node 149:2174 */

.topbar {
  min-height: 80px; max-height: 80px;
  background: var(--surface);
  border-bottom: var(--border-thin) solid var(--tint-neutral-soft);
  display: flex; align-items: center; justify-content: space-between;
  padding-left: var(--space-5xl); padding-right: var(--page-margin);
  overflow: clip;
  position: sticky; top: 0; z-index: 30;
}

.topbar-search {
  display: flex; align-items: center; flex: none;
  height: 32px; padding: 0 var(--btn-pad-x);
  border: none; background: transparent; border-radius: var(--btn-radius-sm);
}
.topbar-search:hover { background: var(--tint-neutral-muted); }
.topbar-search .ts-icon {
  width: 16px; height: 16px; flex: none;
  display: grid; place-items: center; color: var(--content-strong);
}
.topbar-search .ts-label {
  padding: 0 var(--btn-icon-gap); white-space: nowrap;
  font-size: var(--type-button-sm); font-weight: 600;
  line-height: var(--type-button-sm-lh); letter-spacing: var(--type-button-ls);
  color: var(--content-strong);
}
.topbar-search .ts-kbd {
  display: flex; align-items: center; height: 20px; padding: 0 var(--space-md);
  border-radius: var(--radius-xs); background: var(--tint-neutral-muted);
  font-size: var(--type-body-sm); font-weight: 500;
  line-height: var(--type-body-sm-lh); letter-spacing: var(--type-button-ls);
  color: var(--content-medium); white-space: nowrap;
}

.topbar-right { display: flex; align-items: center; gap: var(--space-4xl); height: 40px; }

.admin-info { display: flex; align-items: center; gap: var(--space-lg); border-radius: var(--radius-sm); }
.admin-info .ai-title { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.admin-info .ai-name {
  font-size: var(--type-body-md); font-weight: 600;
  line-height: var(--type-body-md-lh); color: var(--content-default);
}
.admin-info .ai-role {
  font-size: var(--type-body-sm); font-weight: 400;
  line-height: var(--type-body-sm-lh); color: var(--content-strong);
}
.admin-info .ai-avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-pill);
  border: var(--border-thick) solid var(--border-neutral-strong);
  background: #d7dce4; color: var(--content-strong);
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
}

.bell-btn {
  position: relative; flex: none;
  width: var(--btn-size-md); height: var(--btn-size-md);
  border: none; border-radius: var(--btn-radius-pill);
  background: var(--btn-neutral-bg); color: var(--content-default);
  display: grid; place-items: center;
}
.bell-btn:hover { background: var(--btn-neutral-bg-hover); }
.bell-badge {
  position: absolute; top: 1px; right: -3px;
  min-width: 20px; height: var(--space-5xl); padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--bg-info-emphasis);
  border: var(--border-medium) solid var(--bg-neutral-muted);
  color: var(--content-on-colour);
  font-size: var(--type-body-xs); font-weight: 500; line-height: var(--type-body-xs-lh);
  display: flex; align-items: center; justify-content: center;
}
.bell-badge[hidden] { display: none; }


/* == 2. Notification card =================================================
   One anatomy, two presentations. Meta row (icon · category · critical badge ·
   time · close), then title, description, actions.
   Severity drives colour; the badge appears only when severity is critical. */

.ncard .nc-meta { display: flex; align-items: center; gap: 9px; }
/* Icon wrapper — DS ❖ Icon Wrapper (10748:22040): square, pill radius,
   `subtle` tint fill with the matching emphasis colour on the glyph.
   Toast takes the md step (40/20), list takes sm (32/16). */
.ncard .nc-ico {
  flex: none; width: var(--iconwrap-md); height: var(--iconwrap-md);
  border-radius: var(--radius-pill); display: grid; place-items: center;
}
.ncard .nc-ico svg { width: var(--icon-5xl); height: var(--icon-5xl); }
.ncard .nc-cat { font-size: var(--type-body-sm); font-weight: 600; color: var(--content-default); }
/* Badge — DS ❖ Badges (665:4789), type=error size=sm tint=yes:
   `soft` tint fill, emphasis text, pill, body/sm-medium. */
.ncard .nc-badge {
  flex: none;
  font-size: var(--type-body-sm); line-height: var(--type-body-sm-lh);
  font-weight: var(--type-body-sm-weight);
  padding: 0 var(--space-lg); border-radius: var(--radius-pill);
  background: var(--sev-critical-soft); color: var(--sev-critical);
}
.ncard .nc-spacer { flex: 1; }
.ncard .nc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-info-emphasis); flex: none; }
.ncard .nc-time { font-size: var(--type-body-sm); color: var(--content-medium); white-space: nowrap; }
.ncard .nc-x {
  flex: none; width: 28px; height: 28px;
  border: none; background: transparent; color: var(--content-medium);
  border-radius: 7px; display: grid; place-items: center;
}
.ncard .nc-x:hover { background: var(--tint-neutral-muted); color: var(--content-default); }
.ncard .nc-title { font-weight: 700; line-height: 1.3; color: var(--content-default); }
.ncard .nc-desc { color: var(--content-medium); }
.ncard .nc-actions { display: flex; align-items: center; gap: var(--space-2xl); }
/* Buttons — DS ❖ Button Generic (665:3122). Filled and ghost modes at the
   sm step: 32px, radius 6, button/sm type. Severity supplies the fill, so a
   critical Acknowledge is red rather than the primary blue. */
.ncard .nc-btn {
  border: none; white-space: nowrap;
  border-radius: var(--btn-radius-sm);
  font-size: var(--type-button-sm); line-height: var(--type-button-sm-lh);
  font-weight: var(--type-button-weight); letter-spacing: var(--type-button-ls);
}
.ncard .nc-btn.solid {
  color: var(--btn-primary-fg);
  height: var(--btn-size-sm); padding: 0 var(--btn-pad-x);
}
.ncard .nc-btn.solid:hover { filter: brightness(.94); }
.ncard .nc-btn.text { background: transparent; padding: 4px 0; }
.ncard .nc-btn.text:hover { text-decoration: underline; }
.ncard .nc-loader { flex: 1; height: 5px; border-radius: 3px; overflow: hidden; }
.ncard .nc-loader i { display: block; height: 100%; width: 100%; border-radius: 3px; transform-origin: left; }
.ncard .nc-done {
  font-size: 12.5px; font-weight: 600; color: var(--content-success);
  display: inline-flex; align-items: center; gap: 5px;
}

/* --- 2a. Toast presentation --- */
.ncard--toast {
  background: var(--surface);
  border: var(--border-thin) solid var(--border-subtle);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-toast);
  overflow: hidden; padding: 14px 14px 15px;
  animation: toastIn .32s cubic-bezier(.16, .84, .44, 1);
}
.ncard--toast.out { animation: toastOut .22s ease forwards; }
.ncard--toast .nc-title { font-size: 17px; margin-top: var(--space-2xl); letter-spacing: -.01em; }
.ncard--toast .nc-desc { font-size: 13.5px; margin-top: var(--space-sm); }
.ncard--toast .nc-actions { margin-top: 14px; }
/* Geometry comes from .nc-btn — the DS sm step. Nothing to override here. */

@keyframes toastIn  { from { opacity: 0; transform: translateX(20px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px) scale(.98); } }

/* --- 2b. List presentation ---
   Same anatomy, tighter type, text-only actions, no loader. */
.ncard--list {
  display: block; padding: 11px 15px 12px;
  border-bottom: var(--border-thin) solid var(--border-subtle);
  cursor: default;
}
.ncard--list.unread { background: #fbfcfe; cursor: pointer; }
.ncard--list:hover { background: var(--bg-neutral-muted); }
/* List drops to the DS sm icon-wrapper step (32/16), pill radius retained. */
.ncard--list .nc-ico { width: var(--iconwrap-sm); height: var(--iconwrap-sm); }
.ncard--list .nc-ico svg { width: var(--icon-4xl); height: var(--icon-4xl); }
.ncard--list .nc-cat { font-size: 12.5px; }
.ncard--list .nc-badge { padding: 0 var(--space-md); }
.ncard--list .nc-time { font-size: 11.5px; }
.ncard--list .nc-title { font-size: var(--type-body-md); margin-top: var(--space-lg); }
.ncard--list .nc-desc { font-size: 12.5px; margin-top: 2px; }
.ncard--list .nc-actions { margin-top: 9px; }
.ncard--list .nc-btn.text { font-size: 12.5px; }
.ncard--list.unread .nc-title { font-weight: 700; }

/* Mark-as-read control: holds its slot so revealing it doesn't shift layout. */
.ncard--list .nc-read { position: relative; opacity: 0; pointer-events: none; width: 24px; height: 24px; }
.ncard--list.unread:hover .nc-read { opacity: 1; pointer-events: auto; }
.ncard--list .nc-read::after {
  content: "Mark as read";
  position: absolute; top: 30px; right: 0; z-index: 6;
  background: var(--content-default); color: #fff;
  font-size: 11px; font-weight: 600; padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-sm); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .1s; transition-delay: 0s;
  box-shadow: 0 4px 12px rgba(16, 33, 46, .3);
}
.ncard--list .nc-read:hover::after { opacity: 1; transition-delay: .45s; }


/* == 3. Toast stack =======================================================
   One card visible at a time. Closing the top reveals the next; the bar
   clears the whole set. */

.toast-layer {
  position: fixed; top: 88px; right: var(--space-5xl); z-index: 60;
  width: 372px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none;
}
.toast-layer > * { pointer-events: auto; width: 100%; }

.stack-wrap { position: relative; width: 100%; }
.stack-wrap.out { animation: toastOut .2s ease forwards; }

.stack-bar {
  width: 100%; background: var(--surface);
  border: var(--border-thin) solid var(--border-strong);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-toast);
  display: flex; align-items: center; gap: var(--space-lg);
  padding: 7px var(--space-lg) 7px 15px;
  animation: toastIn .3s cubic-bezier(.16, .84, .44, 1);
}
.stack-bar.out { animation: toastOut .2s ease forwards; }
.stack-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-info-emphasis); flex: none; }
.stack-bar .sb-label { flex: 1; font-size: var(--type-body-sm); font-weight: 600; }
.stack-bar .sb-label b { font-weight: 700; }
.stack-bar .sb-crit { color: var(--sev-critical); font-weight: 700; }
.stack-bar button {
  border: none; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 12.5px; padding: var(--space-md) var(--btn-pad-x);
}
.stack-bar .sb-view { background: transparent; color: var(--bg-info-emphasis); }
.stack-bar .sb-view:hover { background: var(--sev-routine-soft); }
.stack-bar .sb-clear {
  background: var(--bg-neutral-muted); color: var(--content-default);
  border: var(--border-thin) solid var(--border-strong);
}
.stack-bar .sb-clear:hover { background: var(--tint-neutral-soft); }


/* == 4. Sheet =============================================================
   Right-hand panel: fixed header, fixed tabs + filter, scrolling body,
   fixed footer. */

.sheet-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(15, 30, 45, .30);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.sheet-scrim.on { opacity: 1; visibility: visible; transition: opacity .28s ease, visibility 0s linear 0s; }

.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 55;
  width: 424px; max-width: 100vw;
  background: var(--surface);
  border-left: var(--border-thin) solid var(--border-subtle);
  box-shadow: var(--shadow-sheet);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(100%); visibility: hidden;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .28s;
}
.sheet.open {
  transform: translateX(0); visibility: visible;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), visibility 0s linear 0s;
}

.sheet-head {
  display: flex; align-items: center; gap: var(--space-lg);
  padding: 14px 14px 12px;
  border-bottom: var(--border-thin) solid var(--border-subtle);
}
.sheet-head h2 { font-size: 15px; margin: 0; font-weight: 700; }
.sheet-head .count { font-size: 12px; color: var(--content-medium); font-weight: 500; }
.sheet-head .grow { flex: 1; }

.sheet .ghost {
  border: none; background: transparent; color: var(--content-medium);
  border-radius: 7px; padding: var(--space-md) 9px;
  font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
}
.sheet .ghost:hover { background: var(--bg-neutral-muted); color: var(--content-default); }
.sheet .ghost.icononly { padding: 7px; }
.sheet .ghost:disabled { opacity: .4; pointer-events: none; }

.sheet-tabs {
  display: flex; gap: 2px; padding: var(--space-md) var(--space-lg) 0;
  border-bottom: var(--border-thin) solid var(--border-subtle);
  overflow-x: auto; scrollbar-width: none;
}
.sheet-tabs::-webkit-scrollbar { display: none; }
.sheet-tab {
  border: none; background: transparent; color: var(--content-medium);
  font-size: var(--type-body-sm); font-weight: 600;
  padding: 9px 11px 11px; border-radius: 7px 7px 0 0;
  position: relative; white-space: nowrap;
}
.sheet-tab:hover { color: var(--content-default); }
.sheet-tab.active { color: var(--bg-info-emphasis); }
.sheet-tab.active::after {
  content: ""; position: absolute; left: var(--space-lg); right: var(--space-lg);
  bottom: -1px; height: 2px; background: var(--bg-info-emphasis); border-radius: 2px;
}

.sheet-filter {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: var(--border-thin) solid var(--border-subtle);
}
.sheet-filter .grow { flex: 1; }
.unread-toggle {
  display: inline-flex; align-items: center; gap: var(--space-lg);
  font-size: 12.5px; font-weight: 600; color: var(--content-medium); cursor: pointer;
}

.sheet-body { overflow-y: auto; flex: 1; }
.time-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--content-medium); padding: var(--space-2xl) var(--space-4xl) var(--space-sm);
  position: sticky; top: 0; z-index: 1;
  background: linear-gradient(var(--surface), var(--surface) 70%, transparent);
}

.sheet-foot { border-top: var(--border-thin) solid var(--border-subtle); padding: 10px 14px; }
.sheet-foot a {
  color: var(--bg-info-emphasis); font-weight: 600; font-size: var(--type-body-sm);
  text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-md);
}
.sheet-foot a:hover { text-decoration: underline; }

.sheet-empty { text-align: center; color: var(--content-medium); padding: 46px var(--space-5xl); }
.sheet-empty .ei {
  width: 42px; height: 42px; margin: 0 auto var(--space-2xl);
  border-radius: var(--radius-xl); background: var(--bg-neutral-muted);
  display: grid; place-items: center;
}
.sheet-empty p { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--content-strong); }
.sheet-empty span { font-size: 12.5px; }

/* Preferences view */
.pref-row {
  display: flex; align-items: center; gap: var(--space-2xl);
  padding: var(--space-2xl) var(--space-4xl);
  border-bottom: var(--border-thin) solid var(--border-subtle);
}
.pref-row .pi { flex: none; width: 30px; height: 30px; border-radius: var(--radius-md); display: grid; place-items: center; }
.pref-row .pl { flex: 1; }
.pref-row .pl b { font-size: 13.5px; font-weight: 600; display: block; }
.pref-row .pl span { font-size: 12px; color: var(--content-medium); }
.prefs-back {
  display: flex; align-items: center; gap: var(--space-md);
  font-size: 12.5px; font-weight: 600; color: var(--content-medium);
  background: transparent; border: none; padding: var(--space-lg) var(--space-2xl);
}
.prefs-back:hover { color: var(--content-default); }


/* == 5. In-sheet snackbar =================================================
   Shown when a notification lands while the sheet is already open. */

.sheet-snack {
  position: absolute; left: 14px; right: 14px; bottom: 62px; z-index: 5;
  display: flex; align-items: center; gap: 9px;
  background: var(--content-default); color: #fff;
  border-radius: var(--radius-lg); padding: 10px 10px 10px var(--type-body-sm);
  box-shadow: 0 10px 26px -8px rgba(16, 33, 46, .55);
  font-size: var(--type-body-sm); font-weight: 600;
  animation: snackIn .26s cubic-bezier(.16, .84, .44, 1);
}
.sheet-snack.out { animation: snackOut .2s ease forwards; }
.sheet-snack > svg { flex: none; opacity: .9; }
.sheet-snack .ss-txt { flex: 1; }
.sheet-snack .ss-view {
  border: none; background: rgba(255, 255, 255, .16); color: #fff;
  font-weight: 700; font-size: 12.5px;
  padding: var(--space-md) var(--btn-pad-x); border-radius: var(--radius-md);
}
.sheet-snack .ss-view:hover { background: rgba(255, 255, 255, .27); }

@keyframes snackIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes snackOut { to { opacity: 0; transform: translateY(12px); } }


/* == Responsive =========================================================== */
@media (max-width: 560px) {
  .topbar { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
  .topbar-search .ts-label, .topbar-search .ts-kbd, .admin-info .ai-title { display: none; }
  .sheet { width: 100vw; }
  .toast-layer { right: var(--space-lg); left: var(--space-lg); width: auto; }
  .sheet-head .count { display: none; }
}