/* ============================================================
   reports.css — self-contained styles for /reports pages
   Served as RCL static asset: _content/Shops.Web.Common/css/reports.css
   No Tailwind dependency. Dark mode via html.dark selector strategy
   (matches the apps' Tailwind class-based dark mode toggle).
   ============================================================ */

/* ----------------------------------------------------------
   Container
   ---------------------------------------------------------- */
.reports-container {
    max-width: 48rem;        /* ~768px — comfortable reading width */
    margin: 0 auto;
    padding: 3rem 1.25rem;
}

/* ----------------------------------------------------------
   Index page — heading / intro
   ---------------------------------------------------------- */
.reports-heading {
    font-size: 1.875rem;     /* 30px */
    font-weight: 700;
    color: #0f172a;          /* slate-900 */
    margin: 0 0 0.5rem;
    line-height: 1.25;
}

.reports-intro {
    font-size: 1rem;
    color: #64748b;          /* slate-500 */
    margin: 0 0 2rem;
}

.reports-empty {
    font-size: 1rem;
    color: #64748b;
}

/* ----------------------------------------------------------
   Index page — report list + cards
   ---------------------------------------------------------- */
.reports-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.report-card {
    border: 1px solid #e2e8f0;   /* slate-200 */
    border-radius: 0.5rem;
    padding: 1.5rem;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.report-card:hover {
    border-color: #cbd5e1;        /* slate-300 */
    box-shadow: 0 1px 6px 0 rgba(15, 23, 42, 0.07);
}

.report-card-title {
    font-size: 1.125rem;          /* 18px */
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
    display: block;
    line-height: 1.4;
}

.report-card-title:hover {
    text-decoration: underline;
    color: #0f172a;
}

.report-card-date {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0.25rem 0 0;
}

.report-card-description {
    font-size: 1rem;
    color: #475569;               /* slate-600 */
    margin: 0.5rem 0 0;
    line-height: 1.6;
}

/* ----------------------------------------------------------
   Detail page — article layout
   ---------------------------------------------------------- */
.report-article {
    /* inherits .reports-container centering via parent */
}

.report-article-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.report-article-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
    line-height: 1.25;
}

.report-meta {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

/* ----------------------------------------------------------
   Detail page — rendered markdown body (replaces `prose`)
   ---------------------------------------------------------- */
.report-body {
    font-size: 1rem;
    line-height: 1.75;
    color: #334155;               /* slate-700 */
}

.report-body > * + * {
    margin-top: 1.25em;
}

.report-body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 2em 0 0.75em;
    line-height: 1.3;
}

.report-body h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f172a;
    margin: 1.75em 0 0.5em;
    line-height: 1.4;
}

.report-body h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0f172a;
    margin: 1.5em 0 0.4em;
}

.report-body p {
    margin: 0 0 1.25em;
}

.report-body ul,
.report-body ol {
    padding-left: 1.625em;
    margin: 0 0 1.25em;
}

.report-body li {
    margin-bottom: 0.4em;
}

.report-body a {
    color: #2563eb;               /* blue-600 — neutral accent */
    text-decoration: underline;
    text-underline-offset: 2px;
}

.report-body a:hover {
    color: #1d4ed8;               /* blue-700 */
}

.report-body strong {
    font-weight: 600;
    color: #0f172a;
}

.report-body em {
    font-style: italic;
}

.report-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
    background: #f1f5f9;          /* slate-100 */
    color: #0f172a;
    padding: 0.15em 0.35em;
    border-radius: 0.25rem;
}

.report-body pre {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    margin: 0 0 1.25em;
}

.report-body pre code {
    background: transparent;
    padding: 0;
    font-size: 0.875rem;
    color: #0f172a;
}

.report-body blockquote {
    border-left: 3px solid #cbd5e1;
    padding-left: 1.25rem;
    margin: 1.5em 0;
    color: #475569;
    font-style: italic;
}

.report-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    margin: 0 0 1.5em;
}

.report-body th {
    text-align: left;
    font-weight: 600;
    color: #0f172a;
    padding: 0.625rem 0.75rem;
    border-bottom: 2px solid #e2e8f0;
    background: #f8fafc;
}

.report-body td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
}

.report-body tr:last-child td {
    border-bottom: none;
}

.report-body hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 2em 0;
}

/* ----------------------------------------------------------
   Detail page — footer / back link
   ---------------------------------------------------------- */
.report-footer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.report-back-link {
    font-size: 0.875rem;
    color: #475569;
    text-decoration: none;
}

.report-back-link:hover {
    color: #0f172a;
    text-decoration: underline;
}

/* ----------------------------------------------------------
   404 state (shared between both pages)
   ---------------------------------------------------------- */
.reports-not-found {
    text-align: center;
    padding: 4rem 1.25rem;
}

.reports-not-found-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1rem;
}

.reports-not-found-body {
    font-size: 1rem;
    color: #64748b;
    margin: 0 0 1.5rem;
}

.reports-not-found-link {
    font-size: 1rem;
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.reports-not-found-link:hover {
    color: #1d4ed8;
}

/* ----------------------------------------------------------
   Dark mode — html.dark overrides (class strategy)
   ---------------------------------------------------------- */
html.dark .report-card {
    background: #1e293b;          /* slate-800 */
    border-color: #334155;        /* slate-700 */
}

html.dark .report-card:hover {
    border-color: #475569;        /* slate-600 */
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
}

html.dark .reports-heading,
html.dark .report-article-title,
html.dark .report-card-title {
    color: #f1f5f9;               /* slate-100 */
}

html.dark .report-card-title:hover {
    color: #f8fafc;
}

html.dark .reports-intro,
html.dark .reports-empty,
html.dark .report-card-date,
html.dark .report-meta {
    color: #94a3b8;               /* slate-400 */
}

html.dark .report-card-description {
    color: #cbd5e1;               /* slate-300 */
}

html.dark .report-article-header {
    border-bottom-color: #334155;
}

html.dark .report-body {
    color: #cbd5e1;               /* slate-300 */
}

html.dark .report-body h2,
html.dark .report-body h3,
html.dark .report-body h4,
html.dark .report-body strong {
    color: #f1f5f9;
}

html.dark .report-body a {
    color: #60a5fa;               /* blue-400 */
}

html.dark .report-body a:hover {
    color: #93c5fd;               /* blue-300 */
}

html.dark .report-body code {
    background: #0f172a;          /* slate-900 */
    color: #e2e8f0;
}

html.dark .report-body pre {
    background: #0f172a;
    border-color: #334155;
}

html.dark .report-body pre code {
    color: #e2e8f0;
}

html.dark .report-body blockquote {
    border-left-color: #475569;
    color: #94a3b8;
}

html.dark .report-body th {
    color: #f1f5f9;
    background: #0f172a;
    border-bottom-color: #334155;
}

html.dark .report-body td {
    color: #cbd5e1;
    border-bottom-color: #1e293b;
}

html.dark .report-body hr {
    border-top-color: #334155;
}

html.dark .report-footer {
    border-top-color: #334155;
}

html.dark .report-back-link {
    color: #94a3b8;
}

html.dark .report-back-link:hover {
    color: #f1f5f9;
}

html.dark .reports-not-found-heading {
    color: #f1f5f9;
}

html.dark .reports-not-found-body {
    color: #94a3b8;
}

html.dark .reports-not-found-link {
    color: #60a5fa;
}

html.dark .reports-not-found-link:hover {
    color: #93c5fd;
}

/* ----------------------------------------------------------
   Responsive — tighten padding on small screens
   ---------------------------------------------------------- */
@media (max-width: 639px) {
    .reports-container {
        padding: 2rem 1rem;
    }

    .reports-heading,
    .report-article-title {
        font-size: 1.5rem;
    }

    .report-card {
        padding: 1.125rem;
    }

    .report-body h2 {
        font-size: 1.25rem;
    }

    .report-body h3 {
        font-size: 1.125rem;
    }

    .report-body table {
        font-size: 0.875rem;
    }

    .report-body th,
    .report-body td {
        padding: 0.5rem;
    }
}