/* ============================================================
   Agency Annual Report
   Styles for the public annual report list and detail pages
   rendered by AgencyController.AnnualReports / .AnnualReport.

   Prefix is anr-, not ar-. audit-reports.css already owns ar-
   for the landing page's audit section, and two features
   sharing a prefix is how a change to one silently restyles
   the other.

   Palette matches board-packages.css - #065D8F on white cards
   over the standard agency page background.
   ============================================================ */

/* Icon vertical alignment fix - matches the treatment in board-packages.css */
.anr-section-heading i,
.anr-year-badge i,
.anr-file-count i,
.anr-read-btn i,
.anr-back-link i,
.anr-row-photo-fallback i,
.anr-attachment-icon i {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
}

/* ---------- Shared ---------- */

.anr-section-heading {
    display: flex;
    align-items: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: #065D8F;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.anr-card {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #ffffff;
    overflow: hidden;
}

.anr-intro {
    margin-bottom: 1.75rem;
}

.anr-year-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    margin-bottom: 0.5rem;
    background: rgba(6, 93, 143, 0.09);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #065D8F;
    white-space: nowrap;
}

/* ---------- List page ---------- */

/* One report per full-width row. Stacked rather than gridded: the agency
   publishes one report a year, so a card grid never filled its own columns. */
.anr-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.anr-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    border-left: 4px solid #065D8F;
    transition: box-shadow 0.2s ease;
}

.anr-row:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Fixed basis with flex-shrink:0 so the photo holds its width and the copy
   takes the rest of the row - the point of going full width. */
.anr-row-photo {
    display: block;
    flex: 0 0 15rem;
    width: 15rem;
    align-self: stretch;
    object-fit: cover;
    background: #f8f9fc;
}

.anr-row-photo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 9rem;
    background: rgba(6, 93, 143, 0.07);
    color: #065D8F;
    font-size: 2.25rem;
}

.anr-row-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.15rem 1.35rem;
}

.anr-row-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

/* The badge carries its own bottom margin for the detail page, where it sits
   alone; in this row the flex gap already spaces it. */
.anr-row-head .anr-year-badge {
    margin-bottom: 0;
}

.anr-row-title {
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.anr-row-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.anr-row-title a:hover {
    color: #065D8F;
    text-decoration: underline;
}

.anr-row-title a:focus-visible {
    outline: 2px solid #065D8F;
    outline-offset: 2px;
}

.anr-row-summary {
    margin-bottom: 1rem;
}

/* margin-top:auto pins the action to the bottom of the row, so rows of
   different copy lengths still line their buttons up. */
.anr-row-actions {
    margin-top: auto;
}

.anr-file-count {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    color: #4a5568;
}

.anr-read-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    border: 1px solid #065D8F;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #065D8F;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.anr-read-btn:hover {
    background: #065D8F;
    color: #ffffff;
    text-decoration: none;
}

.anr-read-btn:focus-visible {
    outline: 2px solid #065D8F;
    outline-offset: 2px;
}

.anr-back-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #065D8F;
    text-decoration: none;
}

.anr-back-link:hover {
    color: #065D8F;
    text-decoration: underline;
}

.anr-back-link:focus-visible {
    outline: 2px solid #065D8F;
    outline-offset: 2px;
}

/* ---------- Detail page ---------- */

.anr-detail-photo {
    display: block;
    width: 100%;
    max-height: 22rem;
    object-fit: cover;
    border-radius: 0.5rem;
}

.anr-detail-heading {
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

/* No max-width on either of these. A reading measure was the wrong call inside
   col-lg-9: the photo spans the column, so capping the copy left the text in a
   narrow strip with a void down the right. The column is the measure here, the
   same as the news article and procurement pages. */
.anr-detail-summary {
    font-size: 1.05rem;
}

.anr-detail-body {
    width: 100%;
}

.anr-detail-body h2,
.anr-detail-body h3,
.anr-detail-body h4 {
    color: #065D8F;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.anr-detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
}

/* An authored table can still be wider than the column - scroll the table, never the page. */
.anr-detail-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
}

/* ---------- Documents ---------- */

.anr-attachment-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 0.3rem;
    font-size: 0.875rem;
    margin: 0;
    padding: 0.75rem;
}

.anr-attachment-table tr {
    background: #f8f9fc;
    border-radius: 0.375rem;
    transition: background 0.15s ease;
}

.anr-attachment-table tr:hover {
    background: #eef1f6;
}

.anr-attachment-table td {
    padding: 0.5rem 0.6rem;
    vertical-align: middle;
}

.anr-attachment-table td:first-child {
    border-radius: 0.375rem 0 0 0.375rem;
}

.anr-attachment-table td:last-child {
    border-radius: 0 0.375rem 0.375rem 0;
}

.anr-attachment-table-icon {
    width: 2.75rem;
}

.anr-attachment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    background: rgba(6, 93, 143, 0.07);
    border-radius: 0.375rem;
    color: #065D8F;
}

.anr-attachment-table-name {
    word-break: break-word;
    overflow-wrap: break-word;
}

.anr-attachment-table-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.anr-attachment-table-name a:hover {
    color: #065D8F;
    text-decoration: underline;
}

.anr-attachment-table-name a:focus-visible {
    outline: 2px solid #065D8F;
    outline-offset: 2px;
}

.anr-attachment-table-size {
    width: 5.5rem;
    text-align: right;
    white-space: nowrap;
}

/* ---------- Empty states ---------- */

.anr-empty-state {
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.anr-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.85rem;
    background: rgba(6, 93, 143, 0.07);
    border-radius: 50%;
    font-size: 1.5rem;
    color: #065D8F;
}

/* ---------- Narrow screens ---------- */

/* Below this the 15rem photo leaves the copy too little room, so the row
   stacks: photo on top, full-bleed, then the body. */
@media (max-width: 767.98px) {
    .anr-row {
        flex-direction: column;
    }

    .anr-row-photo {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16 / 7;
    }

    .anr-row-photo-fallback {
        min-height: 0;
    }
}

@media (max-width: 575.98px) {
    .anr-detail-photo {
        max-height: 12rem;
    }

    .anr-attachment-table-size {
        width: 4.5rem;
    }
}