/* -----------------------------------------------------------------------
   Copyright (c) 2025-2026 Akshaya Vault. All rights reserved.
   Author: Kiran Kurapaty <kkurapaty@gmail.com>

   This source file is part of the Akshaya Vault application and is
   confidential and proprietary. Unauthorized copying, modification, use,
   or distribution of this file, via any medium, is strictly prohibited
   without prior written permission from Akshaya Vault.
   ----------------------------------------------------------------------- */
/* ===================================================
   Akshaya Vault — Reports Design System
   Shared across every /reports/* page. Matches the Help
   page's visual language (indigo/violet gradient accents,
   glass cards, soft shadows) so Reports and Help read as
   one product, not two different apps bolted together.
   =================================================== */

:root {
    --report-accent-1: #6366f1;
    --report-accent-2: #8b5cf6;
    --report-radius: 22px;
}

/* ===== Page shell / hero ===== */
.report-page {
    position: relative;
    width: 100%;
    padding: 0 0 2rem;
}

.report-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 28px;
    margin-bottom: 1.5rem;
    padding: clamp(.5rem, 1vw, 0.75rem) clamp(.5rem, 1vw, 0.75rem);
    background: radial-gradient(circle at 85% 15%, rgba(139, 92, 246, 0.22), transparent 32%), radial-gradient(circle at 10% 90%, rgba(99, 102, 241, 0.16), transparent 30%), color-mix(in srgb, var(--rz-base-background-color, #ffffff) 82%, #6366f1 18%);
    border: 1px solid color-mix(in srgb, var(--rz-primary, #6366f1) 16%, var(--rz-border, rgba(0, 0, 0, .1)));
    box-shadow: 0 24px 70px -35px rgba(79, 70, 229, .35);
}

.report-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--report-accent-1), var(--report-accent-2));
    box-shadow: 0 10px 25px -12px rgba(99, 102, 241, .65);
    flex: 0 0 auto;
}

.report-hero__title {
    margin: 0 !important;
    font-weight: 800 !important;
    letter-spacing: -.03em;
}

.report-hero__subtitle {
    margin: .15rem 0 0 !important;
    color: var(--rz-color-base-700, var(--rz-secondary));
    font-size: .85rem;
}

/* ===== Toolbar (Refresh / Expand-Collapse / Include Inactive / Print) ===== */
.report-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.report-toolbar .rz-button {
    border-radius: 12px !important;
}

/* ===== Section panels ===== */
.report-panel {
    border-radius: var(--report-radius) !important;
    background: color-mix(in srgb, var(--rz-base-background-color, #fff) 62%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-border, rgba(0, 0, 0, .1)) 70%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 55px -38px rgba(0, 0, 0, .4);
    margin-bottom: 1rem;
    overflow: hidden;
}

.report-panel .rz-panel-titlebar,
.report-panel .rz-panel-header {
    background: transparent !important;
    font-weight: 700;
}

/* ===== Member cards (whole-family views) — distinct accent colour per member ===== */
.member-card {
    border-radius: var(--report-radius);
    background: color-mix(in srgb, var(--rz-base-background-color, #fff) 66%, transparent);
    border: 1px solid var(--member-color, var(--rz-border, rgba(0, 0, 0, .1)));
    border-left-width: 5px;
    box-shadow: 0 16px 45px -32px rgba(0, 0, 0, .4);
    padding: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: 1rem;
    transition: transform .18s ease, box-shadow .18s ease;
}

.member-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 50px -30px color-mix(in srgb, var(--member-color, #6366f1) 45%, transparent);
}

.member-card__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #fff;
    font-weight: 800;
    background: var(--member-color, var(--report-accent-1));
    flex: 0 0 auto;
}

.member-card__name {
    color: var(--member-color, inherit);
}

/* ===== Reports index page ===== */
.reports-search-shell {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 56px;
    padding: 0 .45rem 0 1.1rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--rz-base-background-color, #fff) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-primary, #6366f1) 16%, var(--rz-border, rgba(0, 0, 0, .1)));
    box-shadow: 0 14px 35px -20px rgba(31, 41, 55, .35);
    margin-bottom: 1.5rem;
}

.reports-search-shell input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.reports-search-shell__icon {
    color: var(--rz-primary, #6366f1);
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.reports-category {
    margin-bottom: 1.75rem;
}

.reports-category__title {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rz-color-base-700, var(--rz-secondary));
    margin: 0 0 .75rem;
}

/* PDF export (pims-pdf.js) - html2canvas has its own CSS parser (needed to replicate style
   computation for canvas rendering) that does not understand color-mix()/oklch()/etc. at all and
   throws on them, which - worse than just failing the export - can escape as an uncaught error
   Blazor's WASM runtime treats as fatal (see pims-pdf.js's own remarks). Every color-mix() used
   on anything that can appear inside a captured .report-page gets a plain, solid fallback here;
   exact opacity blending doesn't matter for a static PDF snapshot the way it does live on screen.
   Keep this in sync whenever a new color-mix() is added above. */
.pdf-export-mode .report-hero,
.pdf-export-mode .report-panel,
.pdf-export-mode .member-card,
.pdf-export-mode .reports-search-shell,
.pdf-export-mode .report-card {
    background: var(--rz-base-background-color, #ffffff) !important;
    border-color: var(--rz-border, rgba(0, 0, 0, .1)) !important;
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.report-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 108px;
    padding: 1rem;
    border-radius: 18px;
    cursor: pointer;
    background: color-mix(in srgb, var(--rz-base-background-color, #fff) 64%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-border, rgba(0, 0, 0, .1)) 70%, transparent);
    box-shadow: 0 12px 32px -24px rgba(0, 0, 0, .35);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.report-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--rz-primary) 30%, transparent);
    box-shadow: 0 18px 40px -24px rgba(99, 102, 241, .45);
}

.report-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    color: #fff;
    flex: 0 0 auto;
    background: linear-gradient(135deg, var(--report-accent-1), var(--report-accent-2));
}

.report-card__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.report-card__title {
    font-weight: 700;
    font-size: .95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.report-card__description {
    font-size: .76rem;
    color: var(--rz-color-base-700, var(--rz-secondary));
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 680px) {
    .reports-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Checklist (Suggested Actions) — empty boxes for on-paper sign-off ===== */
.report-checklist {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.report-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 1.15rem;
    padding: .4rem 0.25rem;
}

.report-checklist input[type="checkbox"] {
    margin-top: .2rem;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    accent-color: var(--report-accent-1);
}

/* Plain bulleted list, built with a flex marker + gap (not native list-style/padding-left) so
   the space between marker and text is a real, controllable gap, not marker-glyph metrics that
   vary by font/theme - used where a theme reset would otherwise strip native markers anyway. */
.report-bullet-list {
    list-style: none;
    padding-left: 0.25rem;
    margin: 0;
}

.report-bullet-list li {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .35rem 0.25rem;
}

.report-bullet-list li::before {
    content: "\2022";
    color: var(--report-accent-1);
    font-weight: 700;
    flex: 0 0 auto;
}

/* ===== Share link row — copy button reveals on hover, always reachable via keyboard focus ===== */
.share-link-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.share-link-row code {
    word-break: break-all;
}

.share-link-row .copy-btn {
    opacity: 0;
    transition: opacity .15s ease;
}

.share-link-row:hover .copy-btn,
.share-link-row:focus-within .copy-btn {
    opacity: 1;
}