/* ============================================================
   BeirutFlow Alert Center — Win11 action-center bell + flyout panel.
   Pairs with wwwroot/Scripts/notifications.js (renders the DOM this
   file styles) and Views/Shared/_Taskbar.cshtml + _Sidebar.cshtml +
   _Layout.cshtml (bell markup + panel shell).

   Reuses the shell tokens from taskbar.css (--shell-*) for the card
   chrome, and the same soft-pill severity tone-map already used for
   grid badges in formatters.css (--bs-danger/warning/info -bg-subtle /
   -border-subtle / -text-emphasis) so alerts read as one system with
   the rest of the app, in both themes, with no new hardcoded colors.

   RTL: the fixed panel anchor flips via [dir="rtl"] (same convention
   taskbar.css uses for its own fixed panels). Row internals (icon /
   text / count / severity border) use logical (inline-*) properties,
   so they mirror automatically with no extra rules.
   ============================================================ */

/* ── Bell + badge ─────────────────────────────────────────────── */
.s-notif-bell {
  position: relative;
}
.s-notif-badge {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: var(--bs-border-radius-pill, 999px);
  background: var(--bs-danger, #dc3545);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--shell-bg, var(--s-card-solid-bg));
  pointer-events: none;
}
.s-notif-badge[hidden] { display: none; }

/* ── Panel shell (Win11 action-center card) ──────────────────────
   Fixed, dropup anchored bottom-right — same offset math as the other
   taskbar-tray flyouts (.s-taskbar-flyout / .s-tab-preview). ────── */
.s-notif-panel {
  position: fixed;
  right: 10px;
  bottom: calc(var(--s-taskbar-h, 48px) + 8px);
  z-index: 1103;
  display: flex;
  flex-direction: column;
  width: 340px;
  max-width: calc(100vw - 20px);
  max-height: min(70vh, 560px);
  overflow: hidden;
  border-radius: var(--shell-radius, 12px);
  background: var(--shell-bg, var(--s-card-solid-bg));
  border: 1px solid var(--shell-border, var(--s-card-border));
  box-shadow: var(--shell-shadow, var(--s-shadow-lg));
  animation: s-pop-in 0.14s ease;
}
.s-notif-panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .s-notif-panel { animation: none; }
}
/* RTL: mirror the anchor edge (bottom-left instead of bottom-right). */
[dir="rtl"] .s-notif-panel {
  right: auto;
  left: 10px;
}
/* Narrow phones: let the card use nearly the full width. */
@media (max-width: 380px) {
  .s-notif-panel {
    right: 8px;
    left: 8px;
    width: auto;
    max-width: none;
  }
  [dir="rtl"] .s-notif-panel { right: 8px; left: 8px; }
}

/* ── Head: title + "Mark all read" ───────────────────────────── */
.s-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--shell-border, var(--s-card-border));
}
.s-notif-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bs-heading-color, var(--bs-body-color));
  letter-spacing: var(--s-letter-tight, -0.014em);
}
.s-notif-markread {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 0.3rem 0.5rem;
  border-radius: var(--bs-border-radius-sm, 7px);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--shell-accent, var(--bs-primary));
  cursor: pointer;
  transition: background var(--s-transition, 0.15s ease);
}
.s-notif-markread:hover { background: var(--shell-hover, var(--bs-tertiary-bg)); }
.s-notif-markread:active { filter: brightness(0.92); }

/* ── Body: scrollable list of grouped sections ───────────────── */
.s-notif-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.35rem 0;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.s-notif-body:hover { scrollbar-color: var(--s-scroll-thumb, rgba(0, 0, 0, 0.18)) transparent; }

/* ── Section (group) ─────────────────────────────────────────── */
.s-notif-section + .s-notif-section {
  border-top: 1px solid var(--shell-border, var(--s-card-border));
  margin-top: 0.3rem;
  padding-top: 0.3rem;
}
.s-notif-section-head {
  padding: 0.35rem 0.85rem 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color, #6e6e73);
}
/* Group 0 (urgent) gets a touch more emphasis on its label. */
.s-notif-section.is-g0 .s-notif-section-head {
  color: var(--bs-danger-text-emphasis, var(--bs-danger));
}

/* ── Row ──────────────────────────────────────────────────────── */
.s-notif-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  border-inline-start: 3px solid transparent;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background var(--s-transition, 0.15s ease);
}
.s-notif-row:hover { background: var(--shell-hover, var(--bs-tertiary-bg)); }
.s-notif-row:active { background: var(--shell-hover-strong, var(--bs-secondary-bg)); }

.s-notif-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 0.05rem;
  border-radius: 50%;
  font-size: 0.85rem;
  background: var(--shell-chip, var(--bs-tertiary-bg));
  color: var(--s-tool-icon, var(--bs-secondary-color));
}

.s-notif-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.s-notif-row-title {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--bs-body-color);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.s-notif-row-sub {
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6e6e73);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s-notif-count {
  flex: 0 0 auto;
  align-self: center;
  min-width: 1.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--bs-border-radius-pill, 999px);
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color, #6e6e73);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Severity tints (left/inline-start accent + soft icon tint) ──
   Light theme keeps the original Bootstrap "-bg-subtle" tone-map (same
   vocabulary as .slick-cell .badge in formatters.css). Dark theme's
   "-bg-subtle" tokens resolve to light pink/cream/blue (made for a
   light surface), which put light row text on a light background and
   made rows unreadable — so the tint is a translucent color-mix of the
   severity color instead, which stays legible against either surface. */
.s-notif-row.is-danger {
  border-inline-start-color: var(--bs-danger, #dc3545);
  background: var(--bs-danger-bg-subtle);
}
.s-notif-row.is-danger .s-notif-ico {
  background: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
}
.s-notif-row.is-danger:hover { background: var(--bs-danger-border-subtle); }

.s-notif-row.is-warning {
  border-inline-start-color: var(--bs-warning, #ffc107);
  background: var(--bs-warning-bg-subtle);
}
.s-notif-row.is-warning .s-notif-ico {
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}
.s-notif-row.is-warning:hover { background: var(--bs-warning-border-subtle); }

.s-notif-row.is-info {
  border-inline-start-color: var(--bs-info, #0dcaf0);
  background: var(--bs-info-bg-subtle);
}
.s-notif-row.is-info .s-notif-ico {
  background: var(--bs-info-bg-subtle);
  color: var(--bs-info-text-emphasis);
}
.s-notif-row.is-info:hover { background: var(--bs-info-border-subtle); }

/* Dark theme: replace the light "-bg-subtle" fills with a translucent
   overlay of the severity color, and force row text onto the theme's
   own readable body color (instead of whatever the light-tuned subtle
   tokens implied) so title/subtitle stay legible on the darker card. */
:root.theme-cosmos-dark .s-notif-row.is-danger {
  background: color-mix(in srgb, var(--bs-danger, #dc3545) 16%, transparent);
}
:root.theme-cosmos-dark .s-notif-row.is-danger:hover {
  background: color-mix(in srgb, var(--bs-danger, #dc3545) 26%, transparent);
}
:root.theme-cosmos-dark .s-notif-row.is-warning {
  background: color-mix(in srgb, var(--bs-warning, #ffc107) 16%, transparent);
}
:root.theme-cosmos-dark .s-notif-row.is-warning:hover {
  background: color-mix(in srgb, var(--bs-warning, #ffc107) 26%, transparent);
}
:root.theme-cosmos-dark .s-notif-row.is-info {
  background: color-mix(in srgb, var(--bs-info, #0dcaf0) 16%, transparent);
}
:root.theme-cosmos-dark .s-notif-row.is-info:hover {
  background: color-mix(in srgb, var(--bs-info, #0dcaf0) 26%, transparent);
}
:root.theme-cosmos-dark .s-notif-row.is-danger .s-notif-row-title,
:root.theme-cosmos-dark .s-notif-row.is-danger .s-notif-row-sub,
:root.theme-cosmos-dark .s-notif-row.is-warning .s-notif-row-title,
:root.theme-cosmos-dark .s-notif-row.is-warning .s-notif-row-sub,
:root.theme-cosmos-dark .s-notif-row.is-info .s-notif-row-title,
:root.theme-cosmos-dark .s-notif-row.is-info .s-notif-row-sub {
  color: var(--bs-body-color);
}

/* ── Empty state ──────────────────────────────────────────────── */
.s-notif-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--bs-secondary-color, #86868b);
}