/* ==========================================================================
   notifications.css: bell badge, panel, rows, toasts, list and preference pages.

   Self-contained like core/css/sidebar_toybox.css: Toy Box tokens are
   re-declared with a --tb- prefix and scoped to the notification chrome, so
   nothing leaks into the clay/material pages. Loaded by base.html.
   ========================================================================== */

.notif-ui,
.notif-badge{
  --tb-violet:      oklch(58% 0.19 300);
  --tb-violet-deep: oklch(46% 0.17 300);
  --tb-rose:        oklch(64% 0.2 10);
  --tb-card:        oklch(99.5% 0.002 300);
  --tb-ink:         oklch(23% 0.03 300);
  --tb-soft:        oklch(45% 0.025 300);
  --tb-hover:       oklch(95% 0.02 300);
  --tb-unread:      oklch(97% 0.025 300);
  --tb-fill-soft:   oklch(93% 0.035 300);
  --tb-border:      oklch(90% 0.025 300);
  --tb-r-md: 18px; --tb-r-sm: 12px;
  --tb-lift: 0 2px 4px rgb(40 20 80 / .06), 0 12px 28px -8px rgb(40 20 80 / .16),
             0 32px 64px -24px rgb(40 20 80 / .22);
  --tb-ring: 0 0 0 3px oklch(58% 0.19 300 / .30);
  --tb-dur: .15s;
}
.dark .notif-ui,
.dark .notif-badge{
  --tb-violet-deep: oklch(80% 0.13 300);
  --tb-card:     oklch(25.5% 0.026 300);
  --tb-ink:      oklch(95% 0.008 300);
  --tb-soft:     oklch(72% 0.02 300);
  --tb-hover:    oklch(31% 0.028 300);
  --tb-unread:   oklch(29% 0.04 300);
  --tb-fill-soft:oklch(34% 0.05 300);
  --tb-border:   oklch(38% 0.02 300);
  --tb-lift: 0 2px 4px rgb(0 0 0 / .35), 0 12px 28px -8px rgb(0 0 0 / .55);
}

/* --- Unread badge (bell + mobile menu button) ----------------------------- */
.notif-count:empty{display:none}
.notif-badge{
  position:absolute;top:-4px;inset-inline-end:-4px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--tb-rose);color:#fff;font-size:11px;font-weight:800;line-height:18px;
  text-align:center;box-shadow:0 0 0 2px var(--tb-card);pointer-events:none;
}
.notif-badge--menu{top:-2px;inset-inline-end:-2px}

/* --- Panel (fixed beside the sidebar; a sheet on small screens) ----------- */
.notif-panel{
  position:fixed;z-index:60;top:.75rem;inset-inline-start:calc(260px + .75rem);
  width:min(380px,calc(100vw - 1.5rem));max-height:min(560px,calc(100vh - 1.5rem));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--tb-card);color:var(--tb-ink);border:1px solid var(--tb-border);
  border-radius:var(--tb-r-md);box-shadow:var(--tb-lift);
}
.notif-panel.is-collapsed{inset-inline-start:calc(72px + .75rem)}
@media (max-width:1023.98px){
  .notif-panel,.notif-panel.is-collapsed{inset-inline:.75rem;top:4.5rem;width:auto}
}
#notif-panel-body{display:flex;flex-direction:column;min-height:0}
.notif-panel__head,.notif-panel__foot{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.8rem 1rem;flex-shrink:0;
}
.notif-panel__head{border-bottom:1px solid var(--tb-border)}
.notif-panel__head b{font-size:1rem;font-weight:800}
.notif-panel__foot{border-top:1px solid var(--tb-border)}
.notif-panel__list{overflow-y:auto;min-height:0;padding:.35rem}

.notif-link{
  display:inline-flex;align-items:center;gap:.3em;border:0;background:none;cursor:pointer;padding:.3em .5em;
  border-radius:var(--tb-r-sm);font-size:.85rem;font-weight:700;color:var(--tb-violet-deep);text-decoration:none;
}
.notif-link .material-symbols-outlined{font-size:1.1em}
.notif-link:hover{background:var(--tb-hover)}
.notif-link:focus-visible{outline:none;box-shadow:var(--tb-ring)}

/* --- Row (dropdown + list page) -------------------------------------------- */
.notif-row{
  position:relative;display:flex;align-items:flex-start;gap:.7rem;padding:.7rem .75rem;
  border-radius:var(--tb-r-sm);transition:background var(--tb-dur);
}
.notif-row + .notif-row{margin-top:2px}
.notif-row:hover{background:var(--tb-hover)}
.notif-row.is-unread{background:var(--tb-unread)}
.notif-row.is-unread::before{
  content:"";position:absolute;top:1.1rem;inset-inline-start:.3rem;width:6px;height:6px;border-radius:50%;
  background:var(--tb-violet);
}
.notif-row__ico{
  width:2.1rem;height:2.1rem;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  font-size:1.15rem;background:var(--tb-fill-soft);color:var(--tb-violet-deep);margin-inline-start:.35rem;
}
.notif-row__main{display:grid;gap:.12rem;min-width:0;flex:1;color:inherit;text-decoration:none}
.notif-row__main:focus-visible{outline:none;box-shadow:var(--tb-ring);border-radius:var(--tb-r-sm)}
.notif-row__title{font-weight:700;font-size:.92rem;color:var(--tb-ink)}
.notif-row:not(.is-unread) .notif-row__title{font-weight:600}
.notif-row__body{font-size:.85rem;color:var(--tb-soft);overflow-wrap:anywhere}
.notif-row__time{font-size:.75rem;color:var(--tb-soft);opacity:.85}
.notif-row__read{
  width:2rem;height:2rem;flex-shrink:0;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:var(--tb-r-sm);background:transparent;color:var(--tb-soft);
}
.notif-row__read:hover{background:var(--tb-fill-soft);color:var(--tb-violet-deep)}
.notif-row__read:focus-visible{outline:none;box-shadow:var(--tb-ring)}
.notif-row__read .material-symbols-outlined{font-size:1.2rem}

.notif-empty{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;margin:0;padding:2rem 1rem;
  color:var(--tb-soft);font-weight:600;font-size:.9rem;text-align:center;
}
.notif-empty .material-symbols-outlined{font-size:2rem;opacity:.7}
.notif-more{display:grid;place-items:center;padding:1rem;color:var(--tb-soft)}
.notif-more .material-symbols-outlined{animation:notif-spin 1s linear infinite}
@keyframes notif-spin{to{transform:rotate(360deg)}}

/* --- Toasts ----------------------------------------------------------------- */
.notif-toasts{
  position:fixed;z-index:70;inset-block-end:1.2rem;inset-inline-end:1.2rem;
  display:grid;gap:.7rem;width:min(360px,calc(100vw - 2.4rem));pointer-events:none;
}
.notif-toast{
  pointer-events:auto;display:flex;align-items:flex-start;gap:.8rem;padding:.85rem .9rem .85rem 1rem;
  background:var(--tb-card);color:var(--tb-ink);border:1px solid var(--tb-border);
  border-radius:var(--tb-r-md);box-shadow:var(--tb-lift);animation:notif-in .22s ease-out;
}
.notif-toast__ico{
  width:2.1rem;height:2.1rem;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  font-size:1.15rem;background:var(--tb-violet);color:#fff;
}
.notif-toast__body{display:grid;gap:.15rem;min-width:0;flex:1;font-size:.87rem}
.notif-toast__body b{font-weight:800;font-size:.92rem}
.notif-toast__body span{color:var(--tb-soft);overflow-wrap:anywhere}
.notif-toast__body a{justify-self:start;margin-top:.2rem;font-weight:700;color:var(--tb-violet-deep);text-decoration:none}
.notif-toast__body a:hover{text-decoration:underline}
.notif-toast__x{
  width:1.8rem;height:1.8rem;flex-shrink:0;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:var(--tb-r-sm);background:transparent;color:var(--tb-soft);
}
.notif-toast__x:hover{background:var(--tb-hover);color:var(--tb-ink)}
.notif-toast__x .material-symbols-outlined{font-size:1.1rem}
@keyframes notif-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .notif-toast,.notif-more .material-symbols-outlined{animation:none}
}

/* --- List + preferences pages ---------------------------------------------- */
.notif-page__head{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:space-between;margin-bottom:1.2rem}
.notif-page__sub{margin:.25rem 0 0;color:var(--tb-soft);font-weight:600}
.notif-page__actions{display:flex;flex-wrap:wrap;gap:.5rem}
.notif-page__actions .chip-btn{display:inline-flex;align-items:center;gap:.35em;border:0;cursor:pointer}
.notif-page__list{padding:.5rem}

.notif-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:1rem}
.notif-filters a{
  display:inline-flex;align-items:center;gap:.3em;padding:.42em .95em;border-radius:999px;
  font-size:.84rem;font-weight:700;color:var(--tb-soft);text-decoration:none;background:var(--tb-fill-soft);
  transition:background var(--tb-dur),color var(--tb-dur);
}
.notif-filters a .material-symbols-outlined{font-size:1.05em}
.notif-filters a:hover{color:var(--tb-ink)}
.notif-filters a[aria-current="true"]{background:var(--tb-violet);color:#fff}
.notif-filters__sep{width:1px;height:1.4rem;background:var(--tb-border);margin:0 .2rem}

.notif-prefs{padding:.5rem 1rem}
.notif-prefs__row{
  display:grid;grid-template-columns:minmax(0,1fr) repeat(2,6.5rem);align-items:center;gap:.5rem;
  padding:.75rem 0;
}
.notif-prefs__row + .notif-prefs__row{border-top:1px solid var(--tb-border)}
.notif-prefs__row--head{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--tb-soft)}
.notif-prefs__row > :not(:first-child){justify-self:center;text-align:center}
.notif-prefs__cat{display:flex;align-items:center;gap:.6rem;min-width:0}
.notif-prefs__cat .notif-row__ico{margin:0}
.notif-pref-cell{display:grid;place-items:center}
.notif-pref-na{color:var(--tb-soft)}
.notif-pref-locked{display:inline-flex;align-items:center;gap:.25em;font-size:.78rem;font-weight:700;color:var(--tb-soft)}
.notif-pref-locked .material-symbols-outlined{font-size:1rem}

.notif-switch{position:relative;display:inline-flex;cursor:pointer}
.notif-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.notif-switch__track{
  width:2.6rem;height:1.5rem;border-radius:999px;background:var(--tb-border);position:relative;
  transition:background var(--tb-dur);
}
.notif-switch__track::after{
  content:"";position:absolute;top:3px;inset-inline-start:3px;width:calc(1.5rem - 6px);height:calc(1.5rem - 6px);
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .2);transition:transform var(--tb-dur);
}
.notif-switch input:checked + .notif-switch__track{background:var(--tb-violet)}
.notif-switch input:checked + .notif-switch__track::after{transform:translateX(1.1rem)}
[dir="rtl"] .notif-switch input:checked + .notif-switch__track::after{transform:translateX(-1.1rem)}
.notif-switch input:focus-visible + .notif-switch__track{box-shadow:var(--tb-ring)}
.notif-switch input.htmx-request + .notif-switch__track{opacity:.6}