:root {
  --qms-notification-navy: #082f49;
  --qms-notification-teal: #0f766e;
  --qms-notification-border: #d7e2ea;
  --qms-notification-surface: #ffffff;
  --qms-notification-muted: #52677d;
  --qms-notification-critical: #c2413a;
  --qms-notification-warning: #b45309;
  --qms-notification-info: #0369a1;
  --qms-notification-success: #15803d;
}

.topbar-notification-center {
  position: relative;
  flex: 0 0 auto;
}

.topbar-notification-toggle {
  position: relative;
  overflow: visible !important;
}

.topbar-notification-toggle > svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar-notification-toggle.has-unread {
  border-color: rgba(94, 234, 212, 0.65) !important;
  background: rgba(15, 118, 110, 0.28) !important;
  color: #f0fdfa !important;
}

.topbar-notification-badge {
  position: absolute;
  inset-block-start: -7px;
  inset-inline-end: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 2px solid #263446;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(127, 29, 29, 0.32);
}

.topbar-notification-panel {
  position: absolute;
  z-index: 2300;
  inset-block-start: calc(100% + 12px);
  inset-inline-end: 0;
  width: min(430px, calc(100vw - 24px));
  max-height: min(690px, calc(100vh - 90px));
  overflow: hidden;
  border: 1px solid var(--qms-notification-border);
  border-radius: 18px;
  background: var(--qms-notification-surface);
  color: var(--qms-notification-navy);
  box-shadow: 0 24px 60px rgba(15, 35, 55, 0.24), 0 6px 18px rgba(15, 35, 55, 0.1);
}

.topbar-notification-panel[hidden] {
  display: none !important;
}

.topbar-notification-head,
.topbar-notification-footer,
.topbar-notification-scope,
.topbar-notification-item {
  box-sizing: border-box;
}

.topbar-notification-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 13px;
  background: linear-gradient(135deg, #082f49 0%, #115e59 100%);
  color: #fff;
}

.topbar-notification-head span {
  display: block;
  margin-bottom: 3px;
  color: #99f6e4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.topbar-notification-head h2 {
  margin: 0;
  color: #fff !important;
  font-size: 19px;
  line-height: 1.2;
}

.topbar-notification-count {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 11px;
}

.topbar-notification-scope {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 20px;
  border-bottom: 1px solid #e6eef3;
  background: #f3f8fa;
}

.topbar-notification-scope > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.topbar-notification-scope p {
  overflow: hidden;
  margin: 0;
  color: #385369;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-notification-list {
  max-height: min(470px, calc(100vh - 245px));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #8ba6b7 transparent;
  scrollbar-width: thin;
}

.topbar-notification-item-form {
  margin: 0;
  border-bottom: 1px solid #e6edf2;
}

.topbar-notification-item {
  position: relative;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) 18px;
  align-items: start;
  gap: 11px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--qms-notification-navy);
  text-align: start;
  cursor: pointer;
}

.topbar-notification-item:hover,
.topbar-notification-item:focus-visible {
  background: #eff8f8;
  outline: none;
}

.topbar-notification-item.is-unread {
  background: #f5fbff;
}

.topbar-notification-severity {
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--qms-notification-info);
}

.topbar-notification-item.is-critical .topbar-notification-severity { background: var(--qms-notification-critical); }
.topbar-notification-item.is-warning .topbar-notification-severity { background: var(--qms-notification-warning); }
.topbar-notification-item.is-success .topbar-notification-severity { background: var(--qms-notification-success); }

.topbar-notification-copy {
  display: block;
  min-width: 0;
}

.topbar-notification-copy small,
.topbar-notification-copy strong,
.topbar-notification-copy span,
.topbar-notification-copy time {
  display: block;
}

.topbar-notification-copy small {
  margin-bottom: 3px;
  color: #0f766e;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.topbar-notification-copy strong {
  overflow: hidden;
  margin-bottom: 4px;
  color: #102f48 !important;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-notification-copy > span {
  display: -webkit-box;
  overflow: hidden;
  color: #50677b;
  font-size: 10px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.topbar-notification-copy time {
  margin-top: 6px;
  color: #7c2d12;
  font-size: 9px;
  font-weight: 700;
}

.topbar-notification-arrow {
  width: 17px;
  height: 17px;
  margin-top: 14px;
  fill: none;
  stroke: #688096;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[dir="rtl"] .topbar-notification-arrow {
  transform: scaleX(-1);
}

.topbar-notification-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid #dfe8ee;
  background: #f8fafc;
}

.topbar-notification-footer form { margin: 0; }
.topbar-notification-footer button,
.topbar-notification-footer a {
  border: 0;
  background: transparent;
  color: #075985;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.topbar-notification-footer button:hover,
.topbar-notification-footer a:hover { color: #0f766e; text-decoration: underline; }

.topbar-notification-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 38px 24px;
  text-align: center;
}
.topbar-notification-empty svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  background: #dcfce7;
  fill: none;
  stroke: #15803d;
  stroke-width: 2;
}
.topbar-notification-empty strong { color: #14364d; font-size: 13px; }
.topbar-notification-empty span { color: #61778a; font-size: 11px; }

/* Full notification workspace */
.notification-center-workspace {
  display: grid;
  gap: 18px;
  color: #102f48;
}

.notification-center-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 30px clamp(22px, 4vw, 46px);
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 18%, rgba(94, 234, 212, 0.2), transparent 26%),
    linear-gradient(125deg, #082f49 0%, #0f5d64 56%, #0f766e 100%);
  color: #fff;
  box-shadow: 0 20px 50px rgba(15, 45, 64, 0.15);
}

.notification-center-eyebrow {
  display: inline-flex;
  margin-bottom: 11px;
  padding: 6px 10px;
  border: 1px solid rgba(153, 246, 228, 0.38);
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.25);
  color: #ccfbf1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.notification-center-hero h1 {
  margin: 0 0 8px;
  color: #fff !important;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.05;
}

.notification-center-hero > div > p {
  max-width: 760px;
  margin: 0;
  color: #d9f8f3;
  font-size: 14px;
  line-height: 1.65;
}

.notification-center-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: #fff;
}
.notification-center-scope > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 0 5px rgba(94, 234, 212, 0.15);
}
.notification-center-scope strong { font-size: 12px; }
.notification-center-scope small { color: #b7e7e4; font-size: 10px; }

.notification-center-hero-score {
  display: grid;
  min-width: 170px;
  padding: 21px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(8px);
  text-align: center;
}
.notification-center-hero-score span { color: #ccfbf1; font-size: 11px; font-weight: 700; }
.notification-center-hero-score strong { color: #fff; font-size: 48px; line-height: 1.1; }
.notification-center-hero-score small { color: #d6f7f3; font-size: 10px; }

.notification-center-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.notification-center-summary article {
  padding: 18px 20px;
  border: 1px solid var(--qms-notification-border);
  border-top: 4px solid #0f766e;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(19, 55, 77, 0.06);
}
.notification-center-summary span,
.notification-center-summary strong,
.notification-center-summary small { display: block; }
.notification-center-summary span { color: #4d6579; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.notification-center-summary strong { margin: 4px 0; color: #082f49; font-size: 30px; }
.notification-center-summary small { color: #60778a; font-size: 10px; }

.notification-center-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--qms-notification-border);
  border-radius: 16px;
  background: #fff;
}
.notification-center-toolbar > div { margin-inline-end: auto; }
.notification-center-toolbar h2 { margin: 0 0 3px; color: #082f49; font-size: 19px; }
.notification-center-toolbar p { margin: 0; color: #60778a; font-size: 11px; }
.notification-center-toolbar nav {
  display: inline-flex;
  padding: 4px;
  border: 1px solid #d7e2ea;
  border-radius: 11px;
  background: #f5f8fa;
}
.notification-center-toolbar nav a {
  padding: 8px 13px;
  border-radius: 8px;
  color: #466176;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}
.notification-center-toolbar nav a.is-active { background: #fff; color: #0f766e; box-shadow: 0 2px 8px rgba(15, 45, 64, 0.1); }
.notification-center-toolbar form { margin: 0; }
.notification-center-mark-read {
  min-height: 39px;
  padding: 0 14px;
  border: 1px solid #0f766e;
  border-radius: 10px;
  background: #fff;
  color: #0f766e;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.notification-center-mark-read:hover { background: #ecfdf5; }

.notification-center-list { display: grid; gap: 10px; }
.notification-center-card {
  position: relative;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid var(--qms-notification-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(19, 55, 77, 0.05);
}
.notification-center-card.is-unread { border-color: #8dd6d0; background: linear-gradient(90deg, #f0fdfa, #fff 34%); }
.notification-center-card-indicator { width: 10px; height: 10px; border-radius: 50%; background: var(--qms-notification-info); }
.notification-center-card.is-critical .notification-center-card-indicator { background: var(--qms-notification-critical); box-shadow: 0 0 0 5px rgba(194,65,58,.1); }
.notification-center-card.is-warning .notification-center-card-indicator { background: var(--qms-notification-warning); box-shadow: 0 0 0 5px rgba(180,83,9,.1); }
.notification-center-card.is-success .notification-center-card-indicator { background: var(--qms-notification-success); box-shadow: 0 0 0 5px rgba(21,128,61,.1); }
.notification-center-card-copy { min-width: 0; }
.notification-center-card-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 5px; }
.notification-center-card-meta span,
.notification-center-card-meta strong { padding: 4px 7px; border-radius: 999px; background: #edf4f7; color: #385a70; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.notification-center-card-meta strong { background: #ccfbf1; color: #115e59; }
.notification-center-card h3 { margin: 0 0 4px; color: #0b304a; font-size: 15px; }
.notification-center-card p { margin: 0; color: #526b7f; font-size: 11px; line-height: 1.55; }
.notification-center-card time { display: inline-block; margin-top: 8px; color: #8a3417; font-size: 10px; font-weight: 800; }
.notification-center-card form { margin: 0; }
.notification-center-card form button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #0e5f65;
  border-radius: 10px;
  background: #0e5f65;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.notification-center-card form button:hover { background: #084c52; }
.notification-center-card form svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
[dir="rtl"] .notification-center-card form svg { transform: scaleX(-1); }

.notification-center-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 54px 24px;
  border: 1px dashed #b9cbd6;
  border-radius: 18px;
  background: #fff;
  text-align: center;
}
.notification-center-empty svg { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: #dcfce7; fill: none; stroke: #15803d; stroke-width: 2; }
.notification-center-empty h2 { margin: 4px 0 0; color: #12364f; }
.notification-center-empty p { margin: 0; color: #60788b; }

@media (max-width: 900px) {
  .notification-center-hero { grid-template-columns: 1fr; }
  .notification-center-hero-score { min-width: 0; }
  .notification-center-summary { grid-template-columns: 1fr; }
  .notification-center-toolbar { align-items: stretch; flex-wrap: wrap; }
  .notification-center-toolbar > div { width: 100%; }
}

@media (max-width: 640px) {
  .topbar-notification-panel {
    position: fixed;
    inset: 66px 8px auto;
    width: auto;
    max-height: calc(100vh - 76px);
  }
  .topbar-notification-list { max-height: calc(100vh - 245px); }
  .notification-center-hero { padding: 24px 20px; }
  .notification-center-card { grid-template-columns: 10px minmax(0, 1fr); }
  .notification-center-card form { grid-column: 2; }
  .notification-center-card form button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-notification-panel,
  .topbar-notification-item,
  .notification-center-card { transition: none !important; }
}