/* ============================================================
   Secuura Dashboard Surfaces — restyles distribution + dashboard
   views without touching server-rendered markup that needs JS hooks.
   Loaded AFTER nav.css. Layer-on-top only.
   Per DASH-01, DASH-04, DASH-05, DASH-06 + CONTEXT D-06, D-07.
   ============================================================ */

/* ---------- Page header ---------- */
.secuura-distribution-page__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: hsl(var(--foreground));
}
.secuura-distribution-page__lede {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: hsl(var(--muted-foreground));
    margin: 0 0 1rem;
    max-width: 75ch;
}
.secuura-distribution-toolbar {
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 1rem;
    flex-wrap: wrap;
}
@media (max-width: 575.98px) {
    .secuura-distribution-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .secuura-distribution-toolbar .btn {
        width: 100%;
    }
}

/* ---------- Card-section (CONTEXT D-06 — 4-card zones) ---------- */
.secuura-card-section {
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    margin-bottom: 16px; /* CONTEXT specifics: 16px between cards */
    overflow: hidden;
}
.secuura-card-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 24px 24px 16px; /* CONTEXT specifics: 24px heading->content */
    background-color: hsl(var(--muted) / 0.4);
    border-bottom: 1px solid hsl(var(--border));
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--card-foreground));
}
.secuura-card-section__header h2,
.secuura-card-section__header h3,
.secuura-card-section__header h4,
.secuura-card-section__header h5 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.secuura-card-section__header-actions {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}
.secuura-card-section__body {
    padding: 16px 24px 24px;
    background-color: hsl(var(--card));
}
.secuura-card-section__body--padless { padding: 0; }
.secuura-card-section__body--scroll {
    max-height: 32rem;
    overflow-y: auto;
}
.secuura-card-section__lede {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: hsl(var(--muted-foreground));
    margin: 0 0 0.875rem;
}

/* ---------- Data tables (CONTEXT D-07 canonical class .secuura-data-table)
   The legacy alias .secuura-distribution-table is kept for back-compat with
   any markup written before the canonical name was locked. Both classes
   resolve identically. */
.secuura-data-table,
.secuura-distribution-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background-color: transparent;
    font-family: var(--font-sans);
}
.secuura-data-table th,
.secuura-distribution-table th {
    background-color: hsl(var(--muted) / 0.4);
    color: hsl(var(--foreground));    /* 06-13: bumped from --muted-foreground — column headers were near-invisible on dark card */
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid hsl(var(--border));
    text-align: left;
}
.secuura-data-table td,
.secuura-distribution-table td {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid hsl(var(--border) / 0.6);
    font-size: 0.9375rem;
    color: hsl(var(--foreground));
    vertical-align: middle;
}
.secuura-data-table tbody tr:last-child td,
.secuura-distribution-table tbody tr:last-child td {
    border-bottom: none;
}
.secuura-data-table tbody tr:hover td,
.secuura-distribution-table tbody tr:hover td {
    background-color: hsl(var(--muted) / 0.3);
}
.secuura-data-table tbody tr:focus-within td,
.secuura-distribution-table tbody tr:focus-within td {
    background-color: hsl(var(--muted) / 0.3);
}
/* DASH-07 — keyboard focus on inline action icons */
.secuura-data-table td a:focus-visible,
.secuura-data-table td button:focus-visible,
.secuura-data-table td i[tabindex]:focus-visible,
.secuura-distribution-table td a:focus-visible,
.secuura-distribution-table td button:focus-visible,
.secuura-distribution-table td i[tabindex]:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
    border-radius: calc(var(--radius) - 6px);
}

/* ---------- Mobile: collapse table to stacked cards (CONTEXT D-07) ----------
   Spec locked at @media (max-width: 768px). Per-td block + data-label::before. */
@media (max-width: 768px) {
    .secuura-data-table--collapse,
    .secuura-data-table--collapse thead,
    .secuura-data-table--collapse tbody,
    .secuura-data-table--collapse tr,
    .secuura-data-table--collapse td,
    .secuura-data-table--collapse th,
    .secuura-distribution-table--collapse,
    .secuura-distribution-table--collapse thead,
    .secuura-distribution-table--collapse tbody,
    .secuura-distribution-table--collapse tr,
    .secuura-distribution-table--collapse td,
    .secuura-distribution-table--collapse th {
        display: block;
        width: 100%;
    }
    .secuura-data-table--collapse thead,
    .secuura-distribution-table--collapse thead {
        display: none;
    }
    .secuura-data-table--collapse tr,
    .secuura-distribution-table--collapse tr {
        background-color: hsl(var(--card));
        border: 1px solid hsl(var(--border));
        border-radius: calc(var(--radius) - 2px);
        margin-bottom: 0.75rem;
        padding: 8px 12px;
    }
    .secuura-data-table--collapse tbody td,
    .secuura-distribution-table--collapse tbody td {
        display: block;
        padding: 8px 12px;
        border-bottom: 1px dashed hsl(var(--border) / 0.6);
        text-align: left;
    }
    .secuura-data-table--collapse tbody td::before,
    .secuura-distribution-table--collapse tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        color: hsl(var(--muted-foreground));
        margin-bottom: 4px;
    }
    .secuura-data-table--collapse tbody td[data-label=""]::before,
    .secuura-data-table--collapse tbody td:not([data-label])::before,
    .secuura-distribution-table--collapse tbody td[data-label=""]::before,
    .secuura-distribution-table--collapse tbody td:not([data-label])::before {
        content: none;
    }
    .secuura-data-table--collapse tbody td:last-child,
    .secuura-distribution-table--collapse tbody td:last-child {
        border-bottom: none;
    }
    .secuura-data-table--collapse tbody tr:hover td,
    .secuura-distribution-table--collapse tbody tr:hover td {
        background-color: transparent;
    }
}

/* ---------- Monospace timestamps (DASH-04) ---------- */
.secuura-mono-timestamp {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
}
.secuura-mono-timestamp--strong {
    color: hsl(var(--foreground));
    font-weight: 500;
}

/* 06-13 pass 2: MyDocuments row-expand drawer (DataTables row.child).
   The offscreen .secuura-mydocs-details container is always [hidden]; the inline JS
   reads its inner HTML by data-detail-for and injects it into row.child(). */
.secuura-mydocs-details { display: none !important; }

/* Visual cue on the parent row when its child is open — slight tint so the user
   sees what's expanded. */
tr.secuura-row-expanded > td {
    background-color: hsl(var(--muted) / 0.35);
    box-shadow: inset 0 -1px 0 hsl(var(--primary) / 0.4);
}

/* DataTables wraps the child content in its own <tr><td colspan="6">. Strip the
   default padding + table-row chrome so our drawer can paint edge-to-edge. */
tr.secuura-row-expanded + tr > td {
    padding: 0 !important;
    border-top: none;
    background-color: transparent;
}

/* 06-13 pass 2 — Doc drawer: card that slides out from underneath the parent row.
   Distinct surface (tinted darker than the card), inset top shadow to read as
   "layered beneath", rounded bottom corners, slide-down animation. */
.secuura-doc-drawer {
    background-color: hsl(var(--muted) / 0.5);
    padding: 16px 20px;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow:
        inset 0 8px 16px -10px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 hsl(var(--primary) / 0.4);
    animation: secuura-doc-drawer-slide 220ms ease-out;
}
@keyframes secuura-doc-drawer-slide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .secuura-doc-drawer { animation: none; }
}

.secuura-doc-drawer__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.secuura-doc-drawer__header i {
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
}
.secuura-doc-drawer__title {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    margin: 0;
}
.secuura-doc-drawer__count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 9999px;
    background-color: hsl(var(--primary) / 0.18);
    color: hsl(var(--foreground));
    font-size: 0.6875rem;
    font-weight: 600;
}

/* Recipient rows — grid layout, each as a tight horizontal row inside a tinted
   inner panel. Hover lifts the row subtly. */
.secuura-doc-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.secuura-doc-drawer__row {
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) auto minmax(150px, 1fr) minmax(150px, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: calc(var(--radius) - 4px);
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border) / 0.6);
    transition: border-color 150ms ease, background-color 150ms ease;
}
.secuura-doc-drawer__row:hover {
    border-color: hsl(var(--primary) / 0.4);
    background-color: hsl(var(--card));
}
.secuura-doc-drawer__email {
    font-weight: 500;
    color: hsl(var(--foreground));
    word-break: break-all;
}
.secuura-doc-drawer__access {
    display: flex;
    gap: 4px;
}
.secuura-doc-drawer__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.secuura-doc-drawer__meta-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(var(--muted-foreground));
}
.secuura-doc-drawer__actions {
    display: flex;
    gap: 4px;
    justify-self: end;
}

/* Empty-state variant when a document has zero recipients */
.secuura-doc-drawer--empty {
    display: flex;
    align-items: center;
    gap: 12px;
    color: hsl(var(--muted-foreground));
}
.secuura-doc-drawer--empty p { margin: 0; font-size: 0.8125rem; }
.secuura-doc-drawer--empty i { font-size: 1.125rem; }

@media (max-width: 991.98px) {
    .secuura-doc-drawer__row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .secuura-doc-drawer__actions { justify-self: stretch; }
}

/* 06-13 (impeccable critique): inline filter strip surfaced when a list-shaped
   view is filtered to a single context (singledoc in MyDocuments, FilterDocId in
   Sign). Sits directly on the canvas above the toolbar — replaces the previous
   card-header chrome that named the active filter. */
.secuura-active-filter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background-color: hsl(var(--muted) / 0.5);
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.8125rem;
    max-width: 100%;
}
.secuura-active-filter__label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.6875rem;
    color: hsl(var(--muted-foreground));
}
.secuura-active-filter__value {
    color: hsl(var(--foreground));
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50ch;
}
.secuura-active-filter__clear {
    color: hsl(var(--primary));
    text-decoration: none;
    font-weight: 500;
    padding-left: 6px;
    border-left: 1px solid hsl(var(--border));
}
.secuura-active-filter__clear:hover {
    color: hsl(var(--primary));
    text-decoration: underline;
}

/* 06-13 polish (impeccable critique, P2): tokenised replacement for the raw
   Bootstrap `badge badge-pill badge-secondary` recipients-count chip in the
   MyDocuments shares table. Signal-blue at 12% tint per DESIGN.md §2 ("recipients-
   count chip on shared rows"). Tabular-nums so widths align across rows. */
.secuura-count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background-color: hsl(var(--secondary) / 0.15);
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--secondary) / 0.3);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.secuura-count-chip:hover {
    background-color: hsl(var(--secondary) / 0.22);
    border-color: hsl(var(--secondary) / 0.45);
}

/* 06-13 pass 2: Status column cell — multiple badges sit as a tight cluster.
   We CANNOT put display: flex on the <td> itself (it kicks the cell out of
   table-cell layout, so its height stops contributing to the row height and
   the bottom border falls out of alignment with the other cells — Image #82/83).
   Instead the markup wraps the badges in `.secuura-status-cluster` and we style
   that wrapper. As a defensive fallback we also let bare-badge tds flow naturally
   inline, wrapping on narrow widths via inline-block + gap. */
.secuura-status-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
#tblMyDocuments tbody tr[data-doc-status]  > td:first-child > .secuura-status-badge,
#tblSignQueue   tbody tr[data-sign-status] > td:first-child > .secuura-status-badge {
    margin-right: 4px;
    margin-bottom: 2px;
    vertical-align: middle;
}
#tblMyDocuments tbody tr[data-doc-status]  > td:first-child,
#tblSignQueue   tbody tr[data-sign-status] > td:first-child {
    line-height: 1.6;
    white-space: normal;
    vertical-align: middle;
}

/* ---------- Empty state (DASH-04 base; full STATE-01 partial in Phase 4) ---------- */
.secuura-empty-state {
    display: flex;                /* 06-13: force vertical stack so icon → headline → copy → CTA */
    flex-direction: column;       /* always reads top-to-bottom regardless of parent layout. */
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    color: hsl(var(--muted-foreground));
}
.secuura-empty-state__icon {
    font-size: 1.75rem;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.5rem;
    display: block;
}
.secuura-empty-state__headline {
    font-size: 0.9375rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin: 0 0 0.25rem;
}
.secuura-empty-state__copy {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
    max-width: 50ch;
    margin-inline: auto;
}

/* ---------- Progress bar polish (Members.cshtml) ---------- */
.secuura-data-table .progress,
.secuura-distribution-table .progress {
    height: 0.625rem;
    background-color: hsl(var(--muted));
    border-radius: 9999px;
    overflow: hidden;
}
.secuura-data-table .progress-bar,
.secuura-distribution-table .progress-bar {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-size: 0.6875rem;
    line-height: 0.625rem;
    font-weight: 600;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .secuura-data-table tbody tr,
    .secuura-distribution-table tbody tr {
        transition: none;
    }
}


/* =============================================================================
   Dashboard top strip (impeccable critique Phase A) — page heading + 3-tile
   metric strip that doubles as the trust peak. Replaces the old "identity
   card" box-shadow panel. Verified tile carries gold-as-trust per DESIGN.md.
   ============================================================================= */
.secuura-dash-header {
    margin-bottom: 20px;
}
.secuura-dash-header__title {
    font-size: 1.5rem;             /* Display per DESIGN.md scale */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
    color: hsl(var(--foreground));
}
.secuura-dash-header__lede {
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
    margin: 4px 0 0;
}
.secuura-dash-header__lede strong {
    font-weight: 600;
    color: hsl(var(--foreground));
}

/* Audit Phase 5: dashboard widget title (the h3 inside .secuura-card-section).
   Stays visually inside the title-scale range so the page reads h1 (topbar) →
   h2 (greeting) → h3 (widget) → h4? (not used) → body. No skipped levels. */
.secuura-dash-widget-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin: 0;
}

.secuura-dash-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.secuura-dash-metric-card {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color 150ms ease, transform 150ms ease, background-color 150ms ease;
    will-change: transform;   /* Audit Phase 7: pre-promote so hover translateY is a compositor-only paint */
}
a.secuura-dash-metric-card:hover,
a.secuura-dash-metric-card:focus-visible {
    border-color: hsl(var(--primary) / 0.5);
    background-color: hsl(var(--muted) / 0.4);
    text-decoration: none;
    transform: translateY(-1px);
}
a.secuura-dash-metric-card:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}
.secuura-dash-metric-card__icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
    border-radius: calc(var(--radius) - 2px);
    font-size: 1.125rem;
}
.secuura-dash-metric-card__icon--gold {
    background-color: hsl(var(--accent) / 0.22);
    color: hsl(var(--accent-foreground));
}
.secuura-dash-metric-card__icon--warning {
    background-color: hsl(var(--destructive) / 0.12);
    color: hsl(var(--destructive));
}

/* The trust seal — bigger and more substantial than a regular metric icon.
   Solid gold with navy text, subtle inset highlight that reads as embossed.
   Drives the "verified-and-stamped" feeling rather than the previous flat tile. */
.secuura-dash-metric-card__seal {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 30%, hsl(var(--accent) / 0.95), hsl(var(--accent)) 70%);
    color: hsl(var(--accent-foreground));
    border-radius: 9999px;
    font-size: 1.5rem;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -2px 4px rgba(0,0,0,0.18),
        0 0 0 4px hsl(var(--accent) / 0.22);
}
.secuura-dash-metric-card__seal-label {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: hsl(var(--foreground));
}
.secuura-dash-metric-card__seal-date {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    margin-top: 4px;
    display: block;
}
.secuura-dash-metric-card__seal-date .secuura-mono-timestamp {
    font-weight: 600;
    color: hsl(var(--foreground));
}
.secuura-dash-metric-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.secuura-dash-metric-card__value {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
    color: hsl(var(--foreground));
    font-variant-numeric: tabular-nums;
}
.secuura-dash-metric-card__value-trust {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.2;
    color: hsl(var(--foreground));
}
.secuura-dash-metric-card__label {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    margin-top: 2px;
}
.secuura-dash-metric-card__chev {
    color: hsl(var(--muted-foreground));
    transition: color 150ms ease, transform 150ms ease;
}
a.secuura-dash-metric-card:hover .secuura-dash-metric-card__chev {
    color: hsl(var(--primary));
    transform: translateX(2px);
}
.secuura-dash-metric-card--verified {
    grid-template-columns: 56px 1fr;     /* no chev — the seal IS the visual anchor */
    border-color: hsl(var(--accent) / 0.6);
    background:
        linear-gradient(135deg, hsl(var(--accent) / 0.08), hsl(var(--accent) / 0.02));
    box-shadow:
        inset 0 1px 0 hsl(var(--accent) / 0.25),
        0 0 0 1px hsl(var(--accent) / 0.15);
}
.secuura-dash-metric-card--verified:hover {
    /* the verified card is non-interactive at rest; no hover state */
    transform: none;
    background:
        linear-gradient(135deg, hsl(var(--accent) / 0.08), hsl(var(--accent) / 0.02));
    border-color: hsl(var(--accent) / 0.6);
}

@media (max-width: 991.98px) {
    .secuura-dash-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575.98px) {
    .secuura-dash-metrics {
        grid-template-columns: 1fr;
    }
}
@media (prefers-reduced-motion: reduce) {
    .secuura-dash-metric-card,
    .secuura-dash-metric-card__chev {
        transition: none;
        transform: none !important;
    }
}

/* Dashboard left-rail quicklaunch — vertical stack of .secuura-admin-quicklaunch-card,
   the same component AdminDashboard ships in a grid. Stack always (col-lg-3 is narrow). */
.secuura-dash-quicklaunch {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (max-width: 991.98px) {
    .secuura-dash-quicklaunch {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .secuura-dash-quicklaunch > .secuura-admin-quicklaunch-card {
        flex: 1 1 calc(50% - 6px);
        min-width: 240px;
    }
}

/* =============================================================================
   Admin landing page (06-13 pass 2) — surfaces metric strip + quick-launch grid
   for Administrator users. Loaded by Views/Admin/AdminDashboard.cshtml.
   ============================================================================= */
.secuura-admin-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 4px;
}
.secuura-admin-page__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.secuura-admin-page__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: hsl(var(--foreground));
}
.secuura-admin-page__lede {
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
}
/* Audit Phase 1: platform pulse replaces the 4-up hero-metric template.
   Reads as a compliance officer's morning brief — numbers in context, not as
   parade. <strong> tags are tabular-nums for column alignment in the eye. */
.secuura-admin-page__pulse {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: hsl(var(--muted-foreground));
    margin: 12px 0 0;
    max-width: 75ch;
}
.secuura-admin-page__pulse strong {
    color: hsl(var(--foreground));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Count chip beside the quick-launch card title — small, monospaced number that
   sits adjacent to the verb so "Users 184" reads as one phrase. */
.secuura-admin-quicklaunch-card__count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

/* ---------- Metric strip ---------- */
.secuura-admin-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.secuura-admin-metric-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    transition: border-color 150ms ease, transform 150ms ease;
}
.secuura-admin-metric-card:hover {
    border-color: hsl(var(--primary) / 0.5);
    transform: translateY(-1px);
}
.secuura-admin-metric-card__icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
    border-radius: calc(var(--radius) - 2px);
    font-size: 1.125rem;
}
.secuura-admin-metric-card__value {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
    color: hsl(var(--foreground));
    font-family: var(--font-sans);
}
.secuura-admin-metric-card__label {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    margin-top: 2px;
}

@media (max-width: 991.98px) {
    .secuura-admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .secuura-admin-metrics { grid-template-columns: 1fr; }
}

/* ---------- Quick-launch grid ---------- */
.secuura-admin-quicklaunch {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.secuura-admin-quicklaunch__heading {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    margin: 0;
    font-weight: 600;
}
.secuura-admin-quicklaunch__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.secuura-admin-quicklaunch-card {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color 150ms ease, transform 150ms ease, background-color 150ms ease;
    will-change: transform;   /* Audit Phase 7: pre-promote for hover translateY */
}
.secuura-admin-quicklaunch-card:hover,
.secuura-admin-quicklaunch-card:focus-visible {
    border-color: hsl(var(--primary) / 0.5);
    background-color: hsl(var(--muted) / 0.4);
    text-decoration: none;
    transform: translateY(-1px);
}
.secuura-admin-quicklaunch-card:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}
.secuura-admin-quicklaunch-card__icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
    border-radius: calc(var(--radius) - 2px);
    font-size: 1.125rem;
}
.secuura-admin-quicklaunch-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.secuura-admin-quicklaunch-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}
.secuura-admin-quicklaunch-card__desc {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.35;
}
.secuura-admin-quicklaunch-card__chev {
    color: hsl(var(--muted-foreground));
    transition: color 150ms ease, transform 150ms ease;
}
.secuura-admin-quicklaunch-card:hover .secuura-admin-quicklaunch-card__chev {
    color: hsl(var(--primary));
    transform: translateX(2px);
}

@media (max-width: 991.98px) {
    .secuura-admin-quicklaunch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .secuura-admin-quicklaunch__grid { grid-template-columns: 1fr; }
    .secuura-admin-quicklaunch-card { grid-template-columns: 40px 1fr auto; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .secuura-admin-metric-card,
    .secuura-admin-quicklaunch-card,
    .secuura-admin-quicklaunch-card__chev { transition: none; transform: none !important; }
}

/* ---- Dashboard row Block button ----
   Icon-only button that sits alongside icon-and-label buttons (Share / Sign /
   View). Default rendering has two issues:
     1. The global `.btn-icon img { margin-right: 6px }` rule (theme_ssd.css:450)
        is sized for icon-then-label pairs — on a lone img it shifts the icon
        visually off-centre to the left.
     2. With no text, line-height doesn't contribute to height, so the button
        collapses a few pixels shorter than the labelled buttons next to it,
        making the same border-radius look proportionally different.
   Fix: keep the button sized to its icon (per spec), zero the right margin on
   the lone img so the flex centring already declared by .btn-icon takes over,
   and pin the height to match a btn-sm row so the inherited border-radius
   reads identical to the labelled buttons it sits next to. */
/* Corner-radius parity for danger-variant Block buttons: bootstrap-overrides.css
   gives .btn-primary / .btn-secondary / .btn-outline-* a calc(--radius - 2px) =
   10px corner, but skips .btn-danger entirely, so danger buttons inherit
   Bootstrap's default .btn-sm radius of 3.2px and read as visibly sharper
   corners than the Share / Sign / View / Edit buttons next to them. Applied
   to both block-trigger flavours so they match their respective neighbours. */
.secuura-dash-block-trigger,
.secuura-mydocs-block-trigger {
    border-radius: calc(var(--radius) - 2px);
}

.secuura-dash-block-trigger {
    /* Dashboard block trigger is icon-only — square footprint that matches
       a btn-sm's natural vertical bounds (Bootstrap .btn-sm = 0.25rem 0.5rem
       padding + 0.875rem font/line-height ≈ 31px). Keeping width == height
       makes the icon sit centred without extra horizontal padding negotiation.
       MyDocuments block trigger keeps the icon+text format so it needs none
       of this width/height/padding override — only the radius rule above. */
    width: 31px;
    height: 31px;
    padding: 0;
}
.secuura-dash-block-trigger img {
    margin-right: 0;
}

/* Generic icon-only action button — same 31×31 square footprint and centred
   glyph as the Dashboard block trigger above, but reusable across any
   button colour variant (btn-primary, btn-secondary, btn-danger). Apply
   to <button>/<a> elements that contain ONLY an <i> or <img>, no text.
   Used on MyDocuments row Actions (Delete, Download, Download original). */
.secuura-iconbtn {
    width: 31px;
    height: 31px;
    padding: 0;
}
.secuura-iconbtn img,
.secuura-iconbtn i {
    margin-right: 0;
}