/*
 * components/notifications.css
 *
 * What:  The super-admin Notifications screen — the on/off list and its switch
 *        control.
 * Why:   The switch is the whole screen, so it gets the care: a real checkbox
 *        underneath (keyboard, label, no-JS submit all keep working) with the
 *        track and knob drawn from it, rather than a div that only looks like
 *        one.
 *
 *        Every colour comes from the base.css tokens, so the screen follows the
 *        admin theme with nothing hard-coded.
 *
 * Used:  linked from admin/views/_layout.ejs; markup in views/notifications/settings.ejs.
 */

/* ── Summary ────────────────────────────────────────────────── */
/* First thing on the page, because "how much is live right now?" is the
   question an operator opens this screen with. */

.ns-summary {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
}

.ns-summary__count {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.ns-summary__count strong {
    font-size: 1.25rem;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;   /* the number must not jump width */
}

/* Shown only when nothing at all is on — a state worth flagging, because it
   means paying customers are getting no order updates. */
.ns-summary__warn {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-3);
    border-left: 3px solid var(--color-warn);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* ── Groups ─────────────────────────────────────────────────── */

.ns-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ns-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.ns-group__bulk {
    display: flex;
    gap: var(--space-2);
}

/* ── Rows ───────────────────────────────────────────────────── */

.ns-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ns-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
}

.ns-row + .ns-row { border-top: 1px solid var(--color-border-soft); }

/* An OFF row is dimmed and carries no accent; an ON row gets a green rail.
   Two signals, not one — the dimming alone would be invisible to someone
   scanning quickly, and colour alone fails for a colour-blind operator. */
.ns-row {
    padding-left: var(--space-3);
    border-left: 3px solid transparent;
    transition: border-color 120ms ease, opacity 120ms ease;
}

.ns-row:not(.is-on) .ns-row__main { opacity: 0.62; }
.ns-row.is-on { border-left-color: var(--color-success); }

/* Mid-save: the row is inert and says so. */
.ns-row[data-busy] { opacity: 0.55; pointer-events: none; }

.ns-row__main { min-width: 0; }

.ns-row__label {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

.ns-row__note {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

/* The template key. Useful when cross-referencing the POS docs or a log line,
   so it is present but visually last. */
/* The "sent by hand from the admin" group. Flagged because those four carry
   copy an operator typed, not copy we wrote and reviewed — worth a second
   glance before switching one on. */
.ns-group--admin .ns-row__label::after {
    content: 'operator writes the copy';
    display: inline-block;
    margin-left: var(--space-2);
    padding: 1px 6px;
    background: var(--color-primary-soft);
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    vertical-align: middle;
}

.ns-row__key {
    display: inline-block;
    margin-top: var(--space-2);
    padding: 2px 6px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border-soft);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    color: var(--color-text-soft);
}

/* ── The switch ─────────────────────────────────────────────── */

.ns-switch {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
}

/* The real checkbox stays in the layout and keeps working — it is only made
   invisible. display:none would remove it from the tab order and from the
   form submission, which is exactly what must not happen. */
.ns-switch__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.ns-switch__track {
    position: relative;
    display: block;
    width: 44px;
    height: 24px;
    background: var(--color-border);
    border-radius: 999px;
    transition: background-color 140ms ease;
}

.ns-switch__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(20, 20, 20, 0.28);
    transition: transform 140ms ease;
}

.ns-switch__input:checked + .ns-switch__track {
    background: var(--color-success);
}

.ns-switch__input:checked + .ns-switch__track .ns-switch__knob {
    transform: translateX(20px);
}

/* Keyboard focus has to be visible on the track, since the input itself is
   not. Without this the switch is unusable without a mouse. */
.ns-switch__input:focus-visible + .ns-switch__track {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
}

.ns-switch__text {
    min-width: 24px;                      /* stops the row shifting on On/Off */
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-soft);
}

.ns-switch__input:checked ~ .ns-switch__text { color: var(--color-success); }

@media (prefers-reduced-motion: reduce) {
    .ns-switch__track,
    .ns-switch__knob,
    .ns-row { transition: none; }
}

/* ── Actions (no-JS fallback) ───────────────────────────────── */

.ns-actions {
    display: flex;
    justify-content: flex-end;
}

/* ── Phone ──────────────────────────────────────────────────── */
/* The admin console is desktop-first, but an operator switching something off
   in a hurry is likely to be on a phone — so the row stacks rather than
   squeezing the label into two words a line. */

@media (max-width: 640px) {
    .ns-row {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-3);
    }

    .ns-group__head { align-items: flex-start; }
}

/* ── Section contents list ───────────────────────────────────── */
/* Six sections and sixty-two switches: an operator arriving to change one
   thing should not scroll to find out where it lives. */

.ns-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.ns-summary__bulk { display: flex; gap: var(--space-2); }

.ns-toc {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.ns-toc__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill, 999px);
    text-decoration: none;
    font-size: 0.8125rem;
    color: var(--color-text);
}

.ns-toc__item:hover { border-color: var(--color-text-soft); }

.ns-toc__count {
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-soft);
}

.ns-toc__count.is-on { color: var(--color-success); }

/* ── Section heading ─────────────────────────────────────────── */

.ns-group__title { min-width: 0; }

/* Reads as part of the heading, so the section's state is legible without
   counting switches. */
.ns-group__tally {
    margin-left: var(--space-2);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}

.ns-group__tally.is-on { color: var(--color-success); }

.ns-group__blurb {
    margin: var(--space-1) 0 0;
    max-width: 60ch;                      /* a readable measure, not the full card */
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* Select-all. A real checkbox so it can show the INDETERMINATE state a
   partly-on section is in — a pair of buttons cannot express that. */
.ns-selectall {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
}

.ns-selectall input { width: 16px; height: 16px; cursor: pointer; }