/* ============================================================
   notifications-page.css — standalone notification inbox.
   Matches the dashboard's spacing / colour / type system.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:#f6f8fb;
  color:#0f172a;
  display:flex;
  flex-direction:column;
  overscroll-behavior-y:none;
}

/* ── Sticky top bar ───────────────────────────────────────── */
.nx-topbar{
  flex:0 0 auto;
  display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;
  background:#fff;
  border-bottom:1px solid #e6ebf2;
  position:sticky;top:0;z-index:20;
}
.nx-icon-btn{
  width:40px;height:40px;flex:0 0 40px;
  display:grid;place-items:center;
  background:#f1f5f9;border:none;border-radius:12px;
  color:#475569;text-decoration:none;font-size:15px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background 150ms ease,transform 150ms ease;
}
.nx-icon-btn:active{background:#e2e8f0;transform:scale(.94)}
.nx-title{flex:1;font-size:17px;font-weight:800;letter-spacing:-.02em}
.nx-text-btn{
  background:none;border:none;font:inherit;font-size:13px;font-weight:700;
  color:#2563eb;padding:10px 8px;min-height:40px;border-radius:10px;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.nx-text-btn:active{background:#eff6ff}
.nx-text-btn[disabled]{opacity:.5}

/* ── Scroll surface — the only scroller on the page ───────── */
.nx-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
.nx-wrap{max-width:680px;margin:0 auto;padding:16px 16px calc(env(safe-area-inset-bottom,0px) + 40px)}

/* ── Card + rows ──────────────────────────────────────────── */
.nx-card{background:#fff;border:1px solid #e6ebf2;border-radius:16px;overflow:hidden}

.nx-group-head{
  padding:10px 16px 6px;
  font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:#94a3b8;background:#fff;
}

.nx-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;
  border-bottom:1px solid #f1f5f9;
  background:#fff;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.nx-item:last-child{border-bottom:none}
.nx-item.unread{background:#f5f9ff}
.nx-item.tappable{cursor:pointer}
.nx-item.tappable:active{background:#eef4ff}

.nx-item-icon{
  width:36px;height:36px;flex:0 0 36px;
  display:grid;place-items:center;border-radius:11px;font-size:14px;
}
.nx-item-body{flex:1;min-width:0}
.nx-item-title{
  font-size:14px;font-weight:700;line-height:1.35;color:#0f172a;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.nx-item-msg{font-size:13px;color:#475569;line-height:1.5;margin-top:3px;word-break:break-word}
.nx-item-time{font-size:11px;color:#94a3b8;margin-top:6px;font-weight:600}
.nx-dot{width:8px;height:8px;flex:0 0 8px;border-radius:999px;background:#2563eb}

.nx-row-btn{
  width:38px;height:38px;flex:0 0 38px;
  display:grid;place-items:center;
  background:none;border:none;border-radius:10px;
  color:#94a3b8;font-size:14px;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.nx-row-btn:active{background:#f1f5f9;color:#2563eb}

/* ── Skeletons ────────────────────────────────────────────── */
.nx-sk{background:linear-gradient(90deg,#eef2f7 25%,#f8fafc 50%,#eef2f7 75%);
  background-size:200% 100%;animation:nx-shimmer 1.2s ease-in-out infinite;border-radius:8px}
.nx-sk-icon{width:36px;height:36px;flex:0 0 36px;border-radius:11px}
.nx-sk-lines{flex:1;display:flex;flex-direction:column;gap:7px}
.nx-sk-line{height:10px}
.nx-sk-line.w30{width:30%}
.nx-sk-line.w60{width:60%}
.nx-sk-line.w90{width:90%}
@keyframes nx-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.nx-sk{animation:none}}

/* ── Empty / error states ─────────────────────────────────── */
.nx-state{
  background:#fff;border:1px solid #e6ebf2;border-radius:16px;
  padding:40px 24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.nx-state-art{
  width:64px;height:64px;display:grid;place-items:center;border-radius:20px;
  background:#eff6ff;color:#2563eb;font-size:24px;margin-bottom:4px;
}
.nx-state-art-warn{background:#fef2f2;color:#dc2626}
.nx-state-title{font-size:16px;font-weight:800;letter-spacing:-.01em}
.nx-state-text{font-size:13px;color:#64748b;line-height:1.6;max-width:34ch}
.nx-state-cta{
  margin-top:10px;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 22px;border:none;border-radius:12px;
  background:#2563eb;color:#fff;font:inherit;font-size:14px;font-weight:700;
  text-decoration:none;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform 150ms ease;
}
.nx-state-cta:active{transform:scale(.97)}

/* hidden attribute must beat the flex display rules above */
[hidden]{display:none !important}