/* Notifications: cards on the home pages and the Admin > Notifications screen. */
.nf-card { display: flex; gap: .9rem; align-items: flex-start; background: #fff; border: 1px solid #eef0f3; border-left: 5px solid var(--nf-c);
  border-radius: 14px; padding: .9rem 1rem; box-shadow: 0 2px 10px rgba(17, 24, 39, .05); margin-bottom: .7rem; transition: opacity .2s, transform .2s; }
.nf-card.nf-leaving { opacity: 0; transform: translateY(-6px); }
.nf-info { --nf-c: #2563eb; --nf-soft: #eff6ff; }
.nf-success { --nf-c: #059669; --nf-soft: #ecfdf5; }
.nf-warning { --nf-c: #d97706; --nf-soft: #fffbeb; }
.nf-danger { --nf-c: #dc2626; --nf-soft: #fef2f2; }
.nf-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--nf-soft); color: var(--nf-c); font-size: 1.05rem; }
.nf-content { flex: 1; min-width: 0; }
.nf-title { font-weight: 700; color: #111827; margin-bottom: .15rem; }
.nf-body { color: #374151; white-space: pre-line; overflow-wrap: anywhere; }
.nf-body ul, .nf-body ol { margin: .2rem 0 .2rem 1.1rem; padding: 0; white-space: normal; }
.nf-body p { margin: 0 0 .3rem; }
.nf-body a { color: var(--nf-c); font-weight: 600; }
.nf-meta { font-size: .76rem; color: #9ca3af; margin-top: .35rem; }
.nf-close { border: 0; background: transparent; color: #9ca3af; width: 30px; height: 30px; border-radius: 8px; flex: none; }
.nf-close:hover { background: #f3f4f6; color: #374151; }

/* ---- Admin list ---- */
.nf-item { display: flex; gap: .9rem; align-items: flex-start; background: #fff; border: 1px solid #e5e7eb; border-left: 5px solid var(--nf-c);
  border-radius: 14px; padding: .9rem 1rem; margin-bottom: .7rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
.nf-item.nf-off { background: #fcfcfd; }
.nf-item.nf-off .nf-icon { filter: grayscale(.7); opacity: .7; }
.nf-main { flex: 1; min-width: 0; }
.nf-line { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.nf-line .nf-title { margin: 0; }
.nf-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; margin-top: .2rem; }
.nf-status { display: inline-flex; align-items: center; border-radius: 999px; padding: .05rem .55rem; font-size: .7rem; font-weight: 700; }
.nf-status-live { background: #ecfdf5; color: #047857; }
.nf-status-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #10b981; margin-right: .35rem; box-shadow: 0 0 0 3px rgba(16, 185, 129, .2); }
.nf-status-planned { background: #eff6ff; color: #1d4ed8; }
.nf-status-expired { background: #f3f4f6; color: #6b7280; }
.nf-status-inactive { background: #fef2f2; color: #b91c1c; }
.nf-lang-chip { font-size: .62rem; font-weight: 700; border-radius: 5px; padding: .05rem .3rem; background: #f3f4f6; color: #c0c4cc; }
.nf-lang-chip.on { background: #e0e7ff; color: #3730a3; }
.nf-meta span { margin-right: .9rem; display: inline-block; }
.nf-item .nf-meta { color: #6b7280; }
.nf-aud { margin-top: .45rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.nf-actions { display: flex; align-items: center; gap: .35rem; flex: none; }
.nf-actions .btn { padding: .2rem .45rem; }
.nf-stat-live strong { color: #059669; }
.nf-stat-planned strong { color: #1d4ed8; }
.ax-tabs button.ax-tab { border: 0; }
.ax-tabs button.ax-tab:not(.active) { background: transparent; }

/* ---- Editor ---- */
.nf-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem; }
@media (max-width: 991px) { .nf-grid { grid-template-columns: 1fr; } }
.nf-side { position: sticky; top: 0; }
.nf-langs { display: inline-flex; background: #f3f4f6; border-radius: 10px; padding: .2rem; gap: .2rem; }
.nf-langs button { border: 0; background: transparent; border-radius: 8px; padding: .25rem .65rem; font-weight: 700; font-size: .8rem; color: #6b7280; position: relative; }
.nf-langs button.active { background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.nf-langs .nf-dot { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.nf-langs button.filled .nf-dot { background: #10b981; }
.nf-toolbar { display: flex; gap: .25rem; }
.nf-toolbar button { border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; width: 32px; height: 28px; color: #374151; font-size: .8rem; }
.nf-toolbar button:hover { background: #f3f4f6; }
.nf-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
@media (max-width: 576px) { .nf-types { grid-template-columns: repeat(2, 1fr); } }
.nf-type { display: flex; flex-direction: column; align-items: center; gap: .3rem; border: 2px solid #e5e7eb; background: #fff; border-radius: 12px; padding: .6rem .3rem;
  font-size: .8rem; font-weight: 600; color: #374151; }
.nf-type i { font-size: 1.15rem; color: var(--nf-c); }
.nf-type.active { border-color: var(--nf-c); background: var(--nf-soft); }
.nf-seg button { padding: 0 .8rem; min-width: auto; font-weight: 600; }
.nf-seg button.active { background: var(--ax-ink, #1f2937); color: #fff; }
.nf-quick { display: flex; flex-wrap: wrap; gap: .25rem; }
.nf-quick button { border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; font-size: .72rem; padding: .05rem .5rem; color: #374151; }
.nf-quick button:hover { background: #f3f4f6; }
.nf-pick { margin-bottom: .6rem; }
.nf-chip-list { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .3rem; }
.nf-chip { display: inline-flex; align-items: center; gap: .2rem; background: #fff4ec; border: 1px solid #f0b98f; color: #b4531a; border-radius: 999px;
  padding: .05rem .25rem .05rem .55rem; font-size: .76rem; }
.nf-chip button { border: 0; background: transparent; color: inherit; font-weight: 700; padding: 0 .25rem; }
.nf-suggest { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12); max-height: 220px; overflow: auto; padding: .25rem; }
.nf-suggest button { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 7px; padding: .3rem .5rem; font-size: .85rem; }
.nf-suggest button:hover { background: #f3f4f6; }
.nf-reach-list { max-height: 180px; overflow: auto; }