/* ============================================================
   Secuura Status Badge — canonical color + icon + text component.
   Replaces legacy .badge-pill-shared-* on Phase 3 surfaces.
   Legacy classes themselves NOT deleted (Phase 4 sweep handles
   the long tail). Loaded AFTER dashboard.css. Layer-on-top only.
   Per DASH-02, DASH-03, DASH-07 + CONTEXT D-01, D-02.
   ============================================================ */

.secuura-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) - 4px);
    text-decoration: none;
}
.secuura-status-badge::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    font-size: 0.6875rem;
}
.secuura-status-badge__label {
    line-height: inherit;
}

/* ---------- Response states (CONTEXT D-01) ---------- */
.secuura-status-badge--pending {
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    border-color: hsl(var(--border));
}
.secuura-status-badge--pending::before { content: "\f017"; } /* fa-clock */

.secuura-status-badge--read {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}
.secuura-status-badge--read::before { content: "\f06e"; } /* fa-eye */

.secuura-status-badge--signed {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}
.secuura-status-badge--signed::before { content: "\f00c"; } /* fa-check */

/* ---------- Permission tiers (CONTEXT D-02) ---------- */
.secuura-status-badge--noaccess {
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    border-color: hsl(var(--border));
}
.secuura-status-badge--noaccess::before { content: "\f05e"; } /* fa-ban */

/* All three share-permission tiers (view / download / view+download) use the
   same outlined-secondary pill so they read as one family. The icons differ
   so the user can still distinguish them at a glance:
     fa-eye          → view-only
     fa-download     → download-only
     fa-eye + arrow  → view AND download
*/
.secuura-status-badge--view,
.secuura-status-badge--download,
.secuura-status-badge--viewdownload {
    background-color: transparent;
    color: hsl(var(--secondary));
    border-color: hsl(var(--secondary));
}

.secuura-status-badge--view::before { content: "\f06e"; } /* fa-eye */
.secuura-status-badge--download::before { content: "\f019"; } /* fa-download */
.secuura-status-badge--viewdownload::before { content: "\f06e"; } /* fa-eye */
.secuura-status-badge--viewdownload::after {
    content: "\f063"; /* fa-arrow-down — second glyph for the "view & download" stack */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    font-size: 0.625rem;
    margin-left: 0.125rem;
}

/* ---------- Helper variants for Dashboard.cshtml legacy chips ---------- */
.secuura-status-badge--expired {
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    border-color: hsl(var(--border));
}
.secuura-status-badge--expired::before { content: "\f017"; } /* fa-clock */

.secuura-status-badge--blocked {
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
}
.secuura-status-badge--blocked::before { content: "\f05e"; } /* fa-ban */

/* Gold-as-Trust per DESIGN.md §2 — verified status / premium tier only. */
.secuura-status-badge--verified {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}
.secuura-status-badge--verified::before { content: "\f132"; } /* fa-shield */

/* Password-protected document — orange to read as a caution/attention chip,
   distinct from the teal-secondary "download" colour it used to share.
   Literal HSL so it reads orange in both light and dark themes; foreground
   is white for AA contrast on the saturated orange surface. */
.secuura-status-badge--protected {
    background-color: hsl(25 95% 53%);
    color: hsl(0 0% 100%);
}
.secuura-status-badge--protected::before { content: "\f023"; } /* fa-lock */

/* ---------- Size modifier ---------- */
.secuura-status-badge--lg {
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
}

/* ---------- Focus (when wrapped in <a>/<button>) ---------- */
.secuura-status-badge:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* ---------- Reduced motion (defensive — no transitions defined) ---------- */
@media (prefers-reduced-motion: reduce) {
    .secuura-status-badge { transition: none; }
}