/* Shared notification centre.

   Each card's colour is published by the backend as design tokens, which the component applies
   as custom properties on the style attribute. Every colour rule reads a single --nsc-* variable,
   and the variant classes define those same variables as a fallback: inline styles win on
   specificity, so with tokens the backend decides and without them the variant does, with no
   duplicated rules.

   The alert tokens do not exist in this repository's variables.css, which only defines the brand
   and a grey scale. They are declared here, scoped to the component, rather than added to
   variables.css: the brand overlay overwrites that file at build time
   (deployment/<brand>/base/resources/wwwroot/css/), so a token added there would disappear from
   real builds. The brand colour is still inherited from the overlay. */

.notification-list {
    /* surfaces and text */
    --nc-surface: var(--ct-light-white, #fff);
    --nc-border: #DEE2E6;
    --nc-text: var(--ct-dark-grey, #252525);
    --nc-text-muted: #78909C;

    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .75rem;
    box-sizing: border-box;
}

.notification-list-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.notification-list-item {
    margin: 0;
}

/* ---------- list states ---------- */

.notification-list-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem .75rem;
    margin: 0;
    text-align: center;
    font-size: .875rem;
    color: var(--ct-mid-grey, rgb(153, 153, 153));
}

.notification-list-state--error {
    color: var(--ct-alert-red, #CC0000);
}

.notification-list-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--ct-light-grey, #f2f2f2);
    border-top-color: var(--brand-color, #774286);
    border-radius: 50%;
    animation: notification-spin 1s linear infinite;
}

@keyframes notification-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- shared anatomy ---------- */

.notification-card {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: 12px 12px 12px 14px;
    border: 1px solid var(--nsc-border, var(--nc-border));
    /* The accent border is the variant's primary signal. */
    border-left: 4px solid var(--nsc-accent, var(--nc-border));
    border-radius: 12px;
    background-color: var(--nsc-bg, var(--nc-surface));
    box-sizing: border-box;
    transition: border-color .12s ease;
}

/* Unread reinforces the outline with the accent, with no shadows or transforms. */
.notification-card--unread {
    border-color: var(--nsc-accent, var(--brand-color, #774286));
}

.notification-card-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.notification-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    /* The circle takes a wash of the accent and the glyph the full accent. color-mix with a flat
       fallback for WebViews that do not support it. */
    background-color: var(--ct-light-grey, #f2f2f2);
    background-color: color-mix(in srgb, var(--nsc-accent, var(--nc-border)) 18%, var(--nc-surface));
    color: var(--nsc-accent, var(--nc-text));
}

.notification-card-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--nc-text);
    overflow-wrap: break-word;
    text-wrap: pretty;
}

.notification-card-time {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    color: var(--nc-text-muted);
    white-space: nowrap;
}

.notification-card-time-icon {
    font-size: 12px;
}

/* Body and footer align with the title, not with the icon. */
.notification-card-body,
.notification-card-footer {
    margin-left: 40px;
}

.notification-card-body {
    margin-top: 0;
    margin-bottom: 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--nsc-body, var(--nc-text));
    overflow-wrap: break-word;
    text-wrap: pretty;
}

.notification-card-footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notification-card-meta {
    margin: 0;
    font-size: .75rem;
    color: var(--ct-mid-grey, rgb(153, 153, 153));
    overflow-wrap: break-word;
}

.notification-card-meta-value {
    font-variant-numeric: tabular-nums;
}

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

/* ---------- label/value pairs for the order variant ---------- */

.notification-card-details {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 4px;
    margin: 0;
    font-size: .8125rem;
    line-height: 1.45;
}

.notification-card-details dt {
    font-weight: 700;
    color: var(--nc-text);
}

.notification-card-details dd {
    margin: 0;
    color: var(--nc-text);
    overflow-wrap: break-word;
    min-width: 0;
}

/* ---------- badge ---------- */

.notification-card-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-left: 40px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    background-color: var(--ct-light-grey, #f2f2f2);
    background-color: var(--nsc-badge, var(--ct-light-grey, #f2f2f2));
    /* The component picks the text colour from the luminance of the backend-chosen background. */
    color: var(--nsc-badge-text, var(--nc-text));
}

/* ---------- buttons ----------
   Documented exception to the global style: inside cards the label is sentence case rather than
   uppercase. The colour comes from the token, with no new per-colour modifiers. */

.nsc-btn {
    border-radius: 6px;
    padding: 7px 12px;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Outline uses the accessible ink, not the raw accent: a light accent over the card background
   clears neither the text minimum nor the control-boundary minimum. */
.nsc-btn--outline {
    border: 1px solid var(--nsc-btn-ink, var(--nsc-btn, var(--nsc-accent, var(--brand-color, #774286))));
    background-color: transparent;
    color: var(--nsc-btn-ink, var(--nsc-btn, var(--nsc-accent, var(--brand-color, #774286))));
}

.nsc-btn--filled {
    border: 1px solid var(--nsc-btn, var(--nsc-accent, var(--brand-color, #774286)));
    background-color: var(--nsc-btn, var(--nsc-accent, var(--brand-color, #774286)));
    color: var(--nsc-btn-text, var(--ct-light-white, #fff));
}

.nsc-btn--outline:hover {
    background-color: var(--nsc-btn, var(--nsc-accent, var(--brand-color, #774286)));
    color: var(--nsc-btn-text, var(--ct-light-white, #fff));
}

.nsc-btn--filled:hover {
    filter: brightness(.92);
}

.nsc-btn:focus-visible,
.notification-card-main:focus-visible {
    outline: 2px solid var(--nsc-accent, var(--brand-color, #774286));
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---------- fallback variants ----------
   Applied only when the backend publishes no tokens (DesignVersion < 2). They define the same
   variables the tokens would inject, so the rest of the sheet cannot tell them apart. */

.notification-card--order {
    --nsc-accent: #0066CC;
    --nsc-border: #A6CEF0;
    --nsc-bg: #F0F5FD;
}

.notification-card--dispatch {
    --nsc-accent: #E0A800;
    --nsc-border: #DFCE96;
    --nsc-bg: #FCF6E6;
    --nsc-body: #7A5C00;
    /* White text on amber measures 2.1:1. The system dark grey is used instead, at 7.1:1. */
    --nsc-btn-text: #252525;
    --nsc-btn-ink: #7A5C00;
}

.notification-card--arrival {
    --nsc-accent: #67AD2B;
    --nsc-border: #B4CFA4;
    --nsc-bg: #ECF3E8;
    /* Darkened green: the previous tone (#4E8420) measured 3.99:1 on this background. */
    --nsc-body: #416E1B;
    /* The raw accent as button text measures 2.4:1 on this tint. */
    --nsc-btn-ink: #416E1B;
}

.notification-card--cancelled {
    --nsc-accent: var(--ct-alert-red, #CC0000);
    --nsc-border: #D1A6A6;
    --nsc-bg: #F7F0F0;
    --nsc-badge: #EDD9D9;
    --nsc-badge-text: #990000;
}

/* ---------- responsive ---------- */

@media (max-width: 360px) {
    .notification-card-actions {
        justify-content: stretch;
    }

    .nsc-btn {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .notification-list-items {
        max-width: 44rem;
        width: 100%;
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .notification-list-spinner {
        animation-duration: 3s;
    }

    .notification-card {
        transition: none;
    }
}