/* ============================================================================
   Kravspec notifications: the inbox card on the forside and the preferences panel
   under kontoindstillinger.
   Prefix nt-. Only --k-* tokens, so dark mode works for free.
   ============================================================================ */

/* ---- inbox card (sits among the dashboard cards, same shell as dh-card) ---- */
.nt-card {
    background: var(--k-surface); border: 1px solid var(--k-line); border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-sm); margin-bottom: 1.25rem;
}
.nt-card-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem 0.7rem; border-bottom: 1px solid var(--k-line-soft); flex-wrap: wrap; }
.nt-card-title { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--k-ink); }
.nt-spacer { flex: 1; }
.nt-cnt { font-size: 0.72rem; padding: 0.05rem 0.5rem; border-radius: var(--k-radius-pill); background: var(--k-fill); color: var(--k-muted); font-weight: 600; }
.nt-cnt--accent { background: var(--k-accent-tint); color: var(--k-accent-strong); }
.nt-loading { font-size: 0.72rem; color: var(--k-faint); display: inline-flex; align-items: center; gap: 0.3rem; }

.nt-head-btn {
    display: inline-flex; align-items: center; gap: 0.3rem; font: inherit; font-size: 0.78rem; color: var(--k-muted);
    border: 1px solid var(--k-line); background: var(--k-bg-alt); border-radius: 7px; padding: 0.2rem 0.55rem;
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
.nt-head-btn:hover { color: var(--k-ink); border-color: var(--k-accent-border); text-decoration: none; }
.nt-head-btn:disabled { cursor: default; opacity: 0.6; }
.nt-head-btn i { font-size: 0.8em; }

.nt-empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    padding: 1.4rem 1rem; text-align: center; color: var(--k-muted); font-size: 0.84rem;
}
.nt-empty i { font-size: 1.3rem; color: var(--k-faint); margin-bottom: 0.2rem; }
.nt-empty b { color: var(--k-ink); font-weight: 600; }
.nt-empty--quiet { padding: 1rem; }

/* ---- inbox list ---- */
.nt-list { list-style: none; margin: 0; padding: 0.35rem 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 0.2rem; }

.nt-row {
    display: grid; grid-template-columns: 0.6rem 5.2rem minmax(0, 1fr) auto auto; align-items: center; gap: 0.8rem;
    width: 100%; padding: 0.65rem 0.6rem; border: 0; border-radius: 9px; background: transparent;
    color: var(--k-ink); text-align: left; font: inherit; cursor: pointer;
}
.nt-row:hover { background: var(--k-bg-alt); }
.nt-row:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 2px; }
.nt-row:disabled { cursor: default; opacity: 0.7; }

.nt-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: transparent; }
.nt-row--unread .nt-dot { background: var(--k-accent); }
.nt-row--unread .nt-name { font-weight: 600; color: var(--k-ink); }
.nt-name { font-weight: 500; color: var(--k-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nt-kind {
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: var(--k-radius-pill);
    border: 1px solid var(--k-line); color: var(--k-muted); background: var(--k-fill);
}
.nt-kind--project { color: var(--k-accent-strong); background: var(--k-accent-tint); border-color: var(--k-accent-border); }
.nt-kind--org { color: var(--k-info); background: var(--k-info-bg); border-color: var(--k-info-border); }

.nt-main { min-width: 0; display: flex; flex-direction: column; }
.nt-why { font-size: 0.82rem; color: var(--k-muted); margin-top: 0.05rem; }
.nt-when { font-size: 0.76rem; color: var(--k-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nt-arrow { color: var(--k-faint); font-size: 0.75rem; }
.nt-foot { margin: 0; padding: 0.4rem 1rem 0.8rem; text-align: center; }
.nt-foot--note { font-size: 0.76rem; color: var(--k-faint); }

/* ---- unread pill on the Overblik nav item (sidebar, static render) ---- */
/* Same shape as the project context counts (.k-ctx-count), tinted rather than red:
   it says "new items", not "problems". */
.nt-nav-count {
    margin-left: auto; min-width: 1.35rem; padding: 0.05rem 0.45rem; border-radius: var(--k-radius-pill);
    font-size: 0.68rem; font-weight: 600; line-height: 1.2rem; text-align: center;
    color: var(--k-sidebar-accent); background: rgba(74, 141, 240, 0.16);
}
.k-nav-link.active .nt-nav-count { background: rgba(74, 141, 240, 0.28); }

/* ---- preferences panel (kontoindstillinger) ---- */
.nt-pref-form { max-width: 640px; }
.nt-pref-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem;
    margin: 0; padding: 0.7rem 0; border: 0; border-bottom: 1px solid var(--k-line-soft);
}
.nt-pref-row:last-of-type { border-bottom: 0; }
.nt-pref-legend { display: contents; }
.nt-pref-legend > * { grid-column: 1; }
.nt-pref-label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--k-ink); }
.nt-pref-desc { display: block; font-size: 0.8rem; color: var(--k-muted); margin-top: 0.1rem; }
.nt-pref-help { margin: 0.9rem 0 0; }

/* segmented two-way choice: the input is visually hidden, the label span is the button */
.nt-seg { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; border: 1px solid var(--k-line); border-radius: 8px; overflow: hidden; background: var(--k-bg-alt); }
.nt-seg-opt { margin: 0; cursor: pointer; }
.nt-seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.nt-seg-opt span {
    display: inline-block; padding: 0.35rem 0.8rem; font-size: 0.8rem; font-weight: 500; color: var(--k-muted);
    white-space: nowrap; border-left: 1px solid var(--k-line);
}
.nt-seg-opt:first-child span { border-left: 0; }
.nt-seg-opt input:checked + span { background: var(--k-accent-tint); color: var(--k-accent-strong); font-weight: 600; }
.nt-seg-opt input:focus-visible + span { outline: 2px solid var(--k-accent); outline-offset: -2px; }
.nt-seg-opt:hover span { color: var(--k-ink); }

@media (max-width: 640px) {
    /* Phone: badge and time on one line, title and body full width underneath. */
    .nt-row {
        grid-template-columns: 0.6rem auto minmax(0, 1fr);
        grid-template-areas: "dot kind when" "main main main";
        gap: 0.4rem 0.6rem;
    }
    .nt-dot { grid-area: dot; }
    .nt-kind { grid-area: kind; justify-self: start; }
    .nt-when { grid-area: when; justify-self: end; }
    .nt-main { grid-area: main; }
    .nt-name { white-space: normal; }
    .nt-arrow { display: none; }
    .nt-pref-row { grid-template-columns: minmax(0, 1fr); }
    .nt-seg { grid-column: 1; grid-row: auto; justify-self: start; }
}