/*
Shared custom admin CSS. Per project convention: new admin styling goes here
(not in per-template <style> blocks) so one file change has global effect.
Every rule below is scoped under one of the wrapper classes it targets --
never write a bare element selector (h2, table, a, ...) here, since this
file loads on every admin page.

.quote-markdown        -- base typography shared by every rendered-Markdown
                           preview (Service Quote proposal/notes previews).
                           This is OUR OWN rendered markdown (escaped
                           placeholders, controlled pipeline) so it's safe to
                           style directly in the admin page.
.quote-proposal-preview -- Service Quote "Proposal body preview" wrapper
.quote-notes-preview     -- Service Quote "Notes preview" wrapper
.agreement-preview-label -- small label/link line shown above a Service
                           Agreement preview. The agreement content itself is
                           staff-authored raw HTML ("HTML allowed" per its own
                           field help text), so it renders inside a fully
                           sandboxed <iframe srcdoc> (see admin.py
                           _sandboxed_html_preview) with its own internal
                           styles instead of being styled from here -- an
                           arbitrary <style>/<script> in that HTML must never
                           be able to reach page-wide selectors like these.
#client_relationships-group / #insurer_relationships-group
                        -- the ClientInsurerRelationship tabular inline (same
                           model, shown on both the HealthcareInsurer admin
                           via the `insurer` FK's related_name and the Client
                           admin via the `client` FK's related_name). 9 text
                           columns at the default .vTextField width (20em)
                           blow the row out past 2500px, forcing the whole
                           admin page -- sidebar included -- to scroll
                           horizontally instead of just the table.
*/

.quote-markdown {
    max-width: 720px;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    line-height: 1.5;
    color: #303030;
    overflow-wrap: break-word;
}

.quote-markdown p { margin: 0 0 0.7em; }
.quote-markdown strong { font-weight: 700; }
.quote-markdown em { font-style: italic; }

.quote-markdown h1, .quote-markdown h2, .quote-markdown h3,
.quote-markdown h4, .quote-markdown h5, .quote-markdown h6 {
    color: #b45b4a;
    font-weight: 700;
    margin: 0.9em 0 0.4em;
}
.quote-markdown h1:first-child, .quote-markdown h2:first-child, .quote-markdown h3:first-child {
    margin-top: 0;
}
.quote-markdown h1 { font-size: 1.5em; }
.quote-markdown h2 { font-size: 1.3em; }
.quote-markdown h3 { font-size: 1.15em; }
.quote-markdown h4 { font-size: 1.05em; }
.quote-markdown h5, .quote-markdown h6 {
    font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280;
}

.quote-markdown ul, .quote-markdown ol { margin: 0 0 0.7em 1.3em; padding: 0; }
.quote-markdown li { margin: 0 0 0.25em; }
.quote-markdown li > ul, .quote-markdown li > ol { margin-top: 0.25em; margin-bottom: 0.25em; }

.quote-markdown dl { margin: 0 0 0.7em; }
.quote-markdown dt { font-weight: 700; }
.quote-markdown dd { margin: 0 0 0.5em 1.3em; }

.quote-markdown .footnote {
    font-size: 0.85em; color: #6b7280; border-top: 1px solid #e5e7eb;
    margin-top: 1em; padding-top: 0.4em;
}

.quote-markdown hr { border: none; border-top: 1px solid #e5e7eb; margin: 1em 0; }

.quote-markdown a { color: #F48472; text-decoration: underline; word-break: break-word; }

.quote-markdown img { max-width: 100%; height: auto; margin: 0.4em 0; }

.quote-markdown blockquote {
    background: #fff8f0; border-left: 3px solid #F48472;
    padding: 0.55em 0.9em; margin: 0.6em 0;
}
.quote-markdown blockquote p { margin: 0 0 0.5em; }
.quote-markdown blockquote p:last-child { margin-bottom: 0; }

.quote-markdown table {
    width: 100%; max-width: 100%; border-collapse: collapse; margin: 0.6em 0;
    display: block; overflow-x: auto;
}
.quote-markdown th, .quote-markdown td {
    border: 1px solid #e5e7eb; padding: 6px 10px; font-size: 0.92em; text-align: left; vertical-align: top;
}
.quote-markdown thead th { background: #f9fafb; font-weight: 700; border-bottom: 2px solid #e5e7eb; }
.quote-markdown tbody tr:nth-child(even) { background: #fbfbfc; }

.quote-markdown code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 3px;
    padding: 0.05em 0.35em; font-size: 0.9em; word-break: break-word;
}
.quote-markdown pre {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 4px;
    padding: 10px 12px; margin: 0 0 0.7em; font-size: 0.88em; line-height: 1.45;
    white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
}
.quote-markdown pre code { background: none; border: none; padding: 0; font-size: 1em; }

.agreement-preview-label {
    max-width: 900px;
    margin-bottom: 6px;
    font-size: 12px;
    color: #6b7280;
}
.agreement-preview-label a { color: #F48472; font-weight: 600; text-decoration: none; }
.agreement-preview-label a:hover { text-decoration: underline; }

/* The <iframe> ELEMENT itself, as seen from the admin page -- this is a
   normal admin-page style concern (unlike _AGREEMENT_PREVIEW_IFRAME_CSS in
   admin.py, which styles CONTENT inside the sandboxed document and can't
   live here since the iframe has no access to this stylesheet).
   height: 80vh with a min-height floor gives a genuinely readable preview on
   any screen; a fixed-size iframe scrolls its own content by default, so a
   long agreement stays fully browsable without growing the admin page. */
.agreement-preview-iframe {
    width: 100%;
    max-width: 900px;
    height: 80vh;
    min-height: 750px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    display: block;
}

.agreement-preview-expand {
    max-width: 900px;
    margin-bottom: 6px;
    text-align: right;
    font-size: 12px;
}
.agreement-preview-expand a { color: #F48472; font-weight: 600; text-decoration: none; }
.agreement-preview-expand a:hover { text-decoration: underline; }

/* ── Wide single-line admin inputs ────────────────────────────────────────
   Used by the Outreach Rule "Action Item description" (the ActionItem
   headline) and the Email Template subject line. Both hold long templates
   full of {placeholders} and are unreadable at the default width.

   Deliberately NO `width` declaration: a CSS width overrides the HTML `size`
   attribute and would resolve against a narrow wrapper, which is exactly how
   an earlier version of this rule squashed the field back down. `size` sets
   the base width, min-width guarantees a floor, max-width prevents overflow
   on small screens. */
input.outreach-wide-input {
    min-width: 46em;
    max-width: 100%;
}

@media (max-width: 768px) {
    input.outreach-wide-input {
        min-width: 0;
    }
}

/* ── Outreach rule dry-run preview ────────────────────────────────────────
   Styles for admin/outreach_rule_preview.html. Lives here rather than in a
   <style> block in the template so one file changes the whole admin. */
.outreach-preview {
    padding: 16px 20px 32px;
}
.outreach-preview h2 {
    margin-top: 24px;
}
.outreach-preview-note {
    color: #666;
    font-size: 12px;
}
.outreach-preview-warn {
    color: #f44336;
    font-weight: 600;
}
.outreach-preview-panel {
    margin: 14px 0;
    padding: 12px 16px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.outreach-preview-panel.outreach-preview-error {
    background: #fdecea;
    border-color: #f5c6c2;
}
.outreach-preview-panel ul {
    margin: 6px 0 0 18px;
}
.outreach-preview-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
    font-size: 13px;
}
.outreach-preview-table th,
.outreach-preview-table td {
    border: 1px solid #ddd;
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}
.outreach-preview-table th {
    background: #f1f1f1;
    font-weight: 600;
}
.outreach-preview-actions {
    margin-top: 20px;
}

/* Dry-run button in the Outreach Rule changelist. The Preview column is
   narrow, so without nowrap the label wraps and the text spills outside the
   button box. No `width` here — see the note on .outreach-wide-input. */
a.outreach-dry-run-button {
    display: inline-block;
    white-space: nowrap;
    padding: 5px 12px;
    line-height: 1.2;
    text-decoration: none;
}

/* ── Activity Log inlines (Provider + Practice Location) ──────────────────
   Read-only Outreach / Email / Action Item sections on the Provider and
   Practice Location change pages. See pyapp/admin_activity_inlines.py.

   The whole point is UNIFORM ROW HEIGHT: every cell is single-line and
   clipped, and anything verbose hides behind the per-row "View" disclosure.
   One fat row next to a column of thin ones is what makes these tables hard
   to scan, so nothing here may wrap. */

.activity-log-inline h2 {
    font-size: 0.85em;
}

.activity-log-inline table td,
.activity-log-inline table th {
    font-size: 0.8em;
    padding: 4px 8px;
    vertical-align: middle;
    /* No wrapping: a two-line cell drags the whole row taller. Long values are
       already truncated server-side; this stops anything that slips through. */
    white-space: nowrap;
}

/* Django renders the __str__ of each row into td.original as an absolutely
   positioned <p> that overlaps the real columns. */
.activity-log-inline td.original p {
    display: none;
}

/* Read-only inline — no add row, no delete column. */
.activity-log-inline .add-row,
.activity-log-inline .delete {
    display: none;
}

/* Truncating cell. max-width is what actually does the clipping; the cell
   keeps its full text in a title attribute for hover. */
.activity-log-inline .act-cell {
    display: inline-block;
    max-width: 26em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.activity-log-inline .act-muted {
    color: #888;
}

/* Status pills. Colours live here rather than in inline style attributes so
   the palette is changed in one place. */
.activity-log-inline .act-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.activity-log-inline .act-badge-ok    { background: #e6f4ea; color: #1e7e34; }
.activity-log-inline .act-badge-info  { background: #e7f1fa; color: #1c6ea4; }
.activity-log-inline .act-badge-warn  { background: #fdf3e3; color: #a76b00; }
.activity-log-inline .act-badge-bad   { background: #fdecea; color: #c0392b; }
.activity-log-inline .act-badge-muted { background: #eeeeee; color: #666; }

/* Details disclosure — matches the PayerEnrollmentTask activity log so the
   two read the same way. Only this cell may break the nowrap rule, and only
   once the user has opened it. */
.activity-log-inline details > summary {
    color: #417690;
    cursor: pointer;
    list-style: disclosure-closed;
}
.activity-log-inline details[open] > summary {
    list-style: disclosure-open;
    margin-bottom: 4px;
}
.activity-log-inline details .detail-body {
    background: #f8f9fa;
    border-left: 3px solid #417690;
    padding: 6px 10px;
    margin-top: 4px;
    border-radius: 0 3px 3px 0;
    white-space: pre-wrap;
    max-width: 46em;
    color: #333;
}

@media (max-width: 1100px) {
    .activity-log-inline .act-cell { max-width: 14em; }
}

/* ── AI Ops workbench and review surfaces ─────────────────────────────── */
.aiops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.aiops-card,
.aiops-panel {
    background: #fff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    padding: 18px;
}
.aiops-card .count { font-size: 32px; font-weight: 700; color: #234e70; }
.aiops-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 20px;
}
.aiops-panel h2 { margin-top: 0; }
.aiops-panel-wide { grid-column: 1 / -1; }
.aiops-table { width: 100%; border-collapse: collapse; }
.aiops-table th,
.aiops-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: top;
}
.aiops-table tr:last-child td { border-bottom: 0; }
.aiops-inline-form { display: inline; }
.aiops-button {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #417690;
    background: #417690;
    color: #fff !important;
    cursor: pointer;
}
.aiops-muted { color: #666; }
.aiops-subject { font-weight: 600; }
.aiops-run-list { display: grid; gap: 10px; }
.aiops-run-row {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.aiops-run-row:last-child { border-bottom: 0; }
.aiops-run-meta { color: #666; font-size: 12px; margin-top: 3px; }
.aiops-status { white-space: nowrap; }
.aiops-review-container { max-width: 900px; margin-bottom: 20px; }
.aiops-review-notes { width: 100%; max-width: 760px; }
.aiops-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.aiops-related-suggestions {
    margin-top: 20px;
}
.aiops-related-suggestions h2 {
    margin: 0;
    padding: 10px 12px;
}
.object-tools .aiops-inline-form .button {
    box-sizing: border-box;
    height: 26px;
    min-height: 26px;
    margin: 0;
    border: 0;
    border-radius: 15px;
    padding: 3px 12px;
    background: var(--object-tools-bg);
    color: var(--object-tools-fg);
    font-family: inherit;
    font-weight: 400;
    font-size: 11px;
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: top;
}
.object-tools .aiops-inline-form .button:hover,
.object-tools .aiops-inline-form .button:focus {
    background: var(--object-tools-hover-bg);
}
.object-tools li.aiops-object-tool-item {
    vertical-align: top;
}
.object-tools .aiops-inline-form .button.aiops-primary-object-action {
    background: var(--button-bg);
    color: #fff;
}
.object-tools .aiops-inline-form .button.aiops-primary-object-action:hover,
.object-tools .aiops-inline-form .button.aiops-primary-object-action:focus {
    background: var(--button-hover-bg);
}
.aiops-proposal-card {
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #eef5fb;
    border-left: 4px solid #4c86b8;
    border-radius: 6px;
}
.aiops-pre-wrap { white-space: pre-wrap; }
.aiops-email-preview { margin: 18px 0; }
.aiops-email-preview h2 { margin-bottom: 8px; }
.aiops-email-preview .quote-markdown { max-width: 100%; box-sizing: border-box; }
.aiops-email-preview .help { margin-top: 7px; }

/* ── Client-Insurer Relationship inline: narrow columns, contain overflow ──
   Narrow the 8 rep/region/contract-manager text columns from the default
   20em down to a still-readable 11em, and confine any width that still
   doesn't fit to the inline's own table rather than the whole admin page.
   Client/insurer stays at its default autocomplete width.

   Deliberately targets `table` directly (display:block + overflow-x:auto,
   the same pattern as .quote-markdown table above) instead of the `.wrapper`
   div Django's own admin/edit_inline/tabular.html renders around the table:
   production was observed NOT rendering that div at all (0 occurrences of
   class="wrapper" in the served HTML) despite local dev -- same commit, same
   Django>=5.2.8 pin -- rendering it fine, so production is very likely
   resolving a different Django version at build time. `table` is the one
   structural element guaranteed to exist regardless. */
#client_relationships-group table,
#insurer_relationships-group table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}
#client_relationships-group td.field-region input,
#client_relationships-group td.field-provider_rep1_name input,
#client_relationships-group td.field-provider_rep1_email input,
#client_relationships-group td.field-provider_rep1_phone input,
#client_relationships-group td.field-provider_rep2_name input,
#client_relationships-group td.field-provider_rep2_email input,
#client_relationships-group td.field-provider_rep2_phone input,
#client_relationships-group td.field-contract_manager_full_name input,
#insurer_relationships-group td.field-region input,
#insurer_relationships-group td.field-provider_rep1_name input,
#insurer_relationships-group td.field-provider_rep1_email input,
#insurer_relationships-group td.field-provider_rep1_phone input,
#insurer_relationships-group td.field-provider_rep2_name input,
#insurer_relationships-group td.field-provider_rep2_email input,
#insurer_relationships-group td.field-provider_rep2_phone input,
#insurer_relationships-group td.field-contract_manager_full_name input {
    width: 11em;
    min-width: 100px;
}

@media (max-width: 700px) {
    .aiops-panels { grid-template-columns: 1fr; }
    .aiops-run-row { grid-template-columns: 1fr; }
}

/* ── Facility (Practice Location) Payer Enrollment ────────────────────────
   pyapp/admin_facility_enrollment.py and its templates. Everything is
   namespaced .fe-* so it cannot collide with the provider enrollment admin.
   The only inline style= in that admin is the dynamic progress-bar width. */

/* Object-tool buttons on the Facility Enrollment Projects changelist */
.object-tools a.fe-tool {
    color: #fff;
    padding: 3px 12px;
    border-radius: 15px;
    text-decoration: none;
}
.object-tools a.fe-tool-template { background-color: #417690; }
.object-tools a.fe-tool-export   { background-color: #6f42c1; }
.object-tools a.fe-tool-import   { background-color: #28a745; }

/* Progress bar column on the projects changelist */
.fe-progress {
    width: 100px;
    background: #f0f0f0;
    border: 1px solid #ccc;
}
.fe-progress-bar {
    background: #4CAF50;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
}

/* Credentialing-status pills on the facility task changelist. Same palette
   as PayerEnrollmentTaskAdmin.status_display so the two lists read alike. */
.fe-status {
    display: inline-block;
    min-width: 120px;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background: #000;
    white-space: nowrap;
}
.fe-status-onboarding               { background: #9c27b0; }
.fe-status-unknown                  { background: #795548; }
.fe-status-discovery_needed         { background: #3f51b5; }
.fe-status-discovery_sent           { background: #2196f3; }
.fe-status-active                   { background: #C0D6E4; color: #1a5490; }
.fe-status-recredentialing_due      { background: #ff9800; }
.fe-status-not_started              { background: #6c757d; }
.fe-status-app_prepared             { background: #8d6e63; }
.fe-status-submitted                { background: #ffc107; color: #333; }
.fe-status-pending_response         { background: #fd7e14; }
.fe-status-additional_info_requested { background: #ff5722; }
.fe-status-follow_up_sent           { background: #17a2b8; }
.fe-status-approved                 { background: #28a745; }
.fe-status-denied                   { background: #dc3545; }
.fe-status-on_hold                  { background: #e83e8c; }
.fe-status-withdrawn                { background: #6c757d; }

/* Contract-status pills — muted so they read as secondary to credentialing status */
.fe-contract {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9px;
    font-size: 0.9em;
    font-weight: 600;
    white-space: nowrap;
    background: #eeeeee;
    color: #555;
}
.fe-contract-requested,
.fe-contract-payer_review,
.fe-contract-contract_received,
.fe-contract-under_review,
.fe-contract-pending_execution { background: #fdf3e3; color: #a76b00; }
.fe-contract-executed,
.fe-contract-active            { background: #e6f4ea; color: #1e7e34; }
.fe-contract-expired,
.fe-contract-closed            { background: #fdecea; color: #c0392b; }

.fe-overdue { color: #c0392b; font-weight: bold; }
.fe-muted   { color: #999; font-style: italic; }

/* Read-only insurer instructions block on the facility task form */
.fe-instructions {
    border: 2px solid #007bff;
    padding: 15px;
    background: #e7f3ff;
    border-radius: 4px;
    max-width: 900px;
}
.fe-instructions > strong { color: #007bff; }

/* Intermediate pages (bulk status change, import) */
.fe-page  { padding: 20px; }
.fe-block { margin: 20px 0; }
.fe-status-select {
    width: 400px;
    max-width: 100%;
    padding: 5px;
    font-size: 14px;
}
/* Bulk-assign confirmation page: one block per form field, checkbox lists
   (tags) read as a plain vertical list, skipped-row notes stand out */
.fe-bulk-field { margin-bottom: 16px; }
.fe-bulk-field > div > div { margin: 4px 0; }
.fe-bulk-field label { font-weight: normal; }
.fe-bulk-note { color: #a76b00; font-size: 12px; margin-left: 6px; }
.fe-date-panel {
    margin: 20px 0;
    padding: 15px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.fe-date-panel label {
    display: inline-block;
    width: 140px;
    font-weight: bold;
}
.fe-date-panel input[type="date"] {
    padding: 4px 8px;
    font-size: 14px;
}
.fe-date-row { margin-bottom: 10px; }

.fe-callout {
    padding: 15px;
    margin-bottom: 20px;
    border-left: 4px solid #999;
}
.fe-callout h3, .fe-callout h4 { margin-top: 0; }
.fe-callout ul, .fe-callout ol  { margin-left: 20px; }
.fe-callout-info { background: #e7f5fe; border-left-color: #0078d4; }
.fe-callout-warn { background: #fff3cd; border-left-color: #ffc107; }
.fe-callout-note { background: #f0f8ff; border-left-color: #4169e1; margin-top: 30px; }

.fe-import-form {
    max-width: 800px;
    margin: 20px 0;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 5px;
}
.fe-form-row { margin-bottom: 20px; }
.fe-form-row label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
.fe-form-row .helptext {
    display: block;
    color: #666;
    font-size: 12px;
    margin-top: 5px;
}
.fe-submit-row .button { margin-left: 10px; }

/* Import verification report */
.fe-report {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
}
.fe-report-meta {
    color: #888;
    font-size: 13px;
    margin-bottom: 20px;
}
.fe-summary-cards {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.fe-card {
    flex: 1;
    min-width: 150px;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid transparent;
}
.fe-card-number {
    display: block;
    font-size: 36px;
    font-weight: bold;
}
.fe-card-label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-top: 5px;
}
.fe-card-success { background: #d4edda; border-color: #c3e6cb; }
.fe-card-success .fe-card-number { color: #155724; }
.fe-card-info    { background: #d1ecf1; border-color: #bee5eb; }
.fe-card-info .fe-card-number    { color: #0c5460; }
.fe-card-error   { background: #f8d7da; border-color: #f5c6cb; }
.fe-card-error .fe-card-number   { color: #721c24; }
.fe-card-neutral { background: #e2e3e5; border-color: #d6d8db; }
.fe-card-neutral .fe-card-number { color: #383d41; }

.fe-section { margin-bottom: 30px; }
.fe-section h2 {
    font-size: 18px;
    border-bottom: 2px solid #417690;
    padding-bottom: 8px;
    margin-bottom: 15px;
    color: #417690;
}
.fe-fields-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.fe-fields-table th, .fe-fields-table td {
    padding: 10px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
.fe-fields-table th {
    background-color: #f8f9fa;
    font-weight: bold;
    color: #333;
}
.fe-fields-table tr:hover { background-color: #f5f5f5; }
.fe-count-populated { color: #155724; font-weight: bold; }
.fe-count-blank     { color: #856404; }

.fe-client-group {
    margin-bottom: 25px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}
.fe-client-header {
    background: #417690;
    color: #fff;
    padding: 12px 20px;
    font-weight: bold;
    font-size: 15px;
}
.fe-badge {
    background: rgba(255,255,255,0.3);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    margin-left: 10px;
}
.fe-record-row {
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
}
.fe-record-row:last-child { border-bottom: none; }
.fe-record-name {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}
.fe-record-id {
    color: #888;
    font-size: 12px;
    margin-left: 8px;
}
.fe-payer-updates { margin-top: 8px; margin-left: 15px; }
.fe-payer-update  { margin-bottom: 6px; }
.fe-payer-label   { font-weight: 600; color: #417690; }
.fe-field-tags    { display: inline; margin-left: 8px; }
.fe-field-tag {
    display: inline-block;
    background: #e7f5fe;
    color: #0c5460;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    margin: 2px 3px;
}
.fe-error-list {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 15px 20px;
}
.fe-error-list li {
    color: #721c24;
    margin-bottom: 5px;
    font-size: 13px;
}
.fe-action-buttons {
    margin-top: 30px;
    display: flex;
    gap: 10px;
}
.fe-btn {
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
}
.fe-btn-primary   { background: #417690; }
.fe-btn-secondary { background: #6c757d; }

/* ============================================================
   Staff Activity report (admin/staff_activity_report.html)
   ============================================================ */
.sar-wrap { max-width: 1400px; margin: 0 auto; padding: 10px 20px 40px; }

.sar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    align-items: flex-end;
    padding: 14px 18px;
    margin-bottom: 12px;
    background: #f8f9fa;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
}
.sar-filter label { display: block; font-size: 11px; font-weight: 600; color: #666; text-transform: uppercase; margin-bottom: 4px; }
.sar-filter input[type="date"], .sar-filter select { min-width: 160px; padding: 5px 8px; }
.sar-filter-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.sar-filter-actions .button { padding: 7px 14px; line-height: 1.2; }
.sar-btn-primary { background: #417690; color: #fff; }
.sar-help { color: #666; font-size: 12px; line-height: 1.5; margin: 0 0 20px; max-width: 1000px; }

.sar-summary { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 24px; }
.sar-card { flex: 1; min-width: 160px; padding: 16px 20px; border-radius: 8px; text-align: center; border: 1px solid transparent; }
.sar-card-num { display: block; font-size: 32px; font-weight: bold; line-height: 1.1; }
.sar-card-lbl { display: block; font-size: 13px; color: #555; margin-top: 4px; }
.sar-card-green   { background: #d4edda; border-color: #c3e6cb; }
.sar-card-green   .sar-card-num { color: #155724; }
.sar-card-blue    { background: #d1ecf1; border-color: #bee5eb; }
.sar-card-blue    .sar-card-num { color: #0c5460; }
.sar-card-neutral { background: #e2e3e5; border-color: #d6d8db; }
.sar-card-neutral .sar-card-num { color: #383d41; }

.sar-rollup, .sar-timeline, .sar-mini { width: 100%; border-collapse: collapse; font-size: 13px; }
.sar-rollup { margin-bottom: 30px; }
.sar-rollup caption { caption-side: top; text-align: left; font-weight: 600; font-size: 14px; color: #417690; padding: 0 0 8px; }
.sar-rollup th, .sar-rollup td, .sar-timeline th, .sar-timeline td, .sar-mini th, .sar-mini td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e5e5e5;
}
.sar-mini th, .sar-mini td { padding: 5px 8px; }
.sar-rollup th, .sar-timeline th, .sar-mini th { background: #f8f9fa; font-weight: 600; color: #333; white-space: nowrap; }
.sar-rollup tbody tr:hover, .sar-timeline tbody tr:hover { background: #f5f9fc; }
.sar-total-row td { background: #f1f4f7; font-weight: 600; border-top: 2px solid #cfd8e0; }
.sar-num { text-align: right !important; white-space: nowrap; }
.sar-nowrap { white-space: nowrap; }
.sar-col-when { white-space: nowrap; width: 1%; }
.sar-col-type { white-space: nowrap; width: 1%; }
.sar-detail { max-width: 460px; color: #333; line-height: 1.45; }

.sar-group { margin-bottom: 28px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.sar-group-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    background: #417690;
    color: #fff;
    padding: 10px 16px;
}
.sar-group-name { font-weight: bold; font-size: 15px; }
.sar-group-username { opacity: 0.8; font-size: 12px; }
.sar-group-count { background: rgba(255,255,255,0.3); padding: 2px 10px; border-radius: 12px; font-size: 12px; }
.sar-group-stat { font-size: 12px; opacity: 0.9; }
.sar-group-body { padding: 14px 16px 6px; }
.sar-group-body h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: #417690; margin: 0 0 8px; }
.sar-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-bottom: 18px; }
.sar-panel { background: #fafbfc; border: 1px solid #eee; border-radius: 6px; padding: 12px 14px; }
.sar-verbs { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 20px; font-size: 13px; }
.sar-verbs li { break-inside: avoid; padding: 2px 0; }
.sar-verb-n { display: inline-block; min-width: 28px; text-align: right; font-weight: 700; color: #155724; margin-right: 6px; }
.sar-timeline-title { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.sar-timeline-title .sar-muted { text-transform: none; letter-spacing: 0; font-weight: normal; }

.sar-muted { color: #888; font-size: 12px; }
.sar-kind {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: #e2e3e5; color: #383d41;
}
.sar-kind-admin     { background: #e7f5fe; color: #0c5460; }
.sar-kind-activity  { background: #fff3cd; color: #856404; }
.sar-kind-completed { background: #d4edda; color: #155724; }
.sar-kind-created   { background: #ede7f6; color: #4527a0; }
.sar-kind-uploaded  { background: #e0f2f1; color: #00695c; }
.sar-kind-generated { background: #fce4ec; color: #880e4f; }
.sar-kind-sent      { background: #e3f2fd; color: #0d47a1; }
.sar-empty { padding: 30px; text-align: center; color: #666; background: #f8f9fa; border-radius: 8px; }

.sar-print-header { display: none; }

@media print {
    @page { size: letter landscape; margin: 0.5in 0.6in; }
    #header, .breadcrumbs, #content h1, .sar-filters, .sar-help, #nav-sidebar, #toggle-nav-sidebar,
    #footer, .messagelist { display: none !important; }
    #container, #content, .main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
    .sar-wrap { max-width: none; padding: 0; font-size: 11px; }
    .sar-print-header { display: block; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid #417690; }
    .sar-print-title { font-size: 18px; font-weight: bold; color: #417690; }
    .sar-print-meta { font-size: 11px; color: #555; margin-top: 3px; }
    .sar-summary { margin-bottom: 14px; }
    .sar-card { padding: 8px 12px; min-width: 120px; }
    .sar-card-num { font-size: 22px; }
    .sar-rollup, .sar-timeline, .sar-mini { font-size: 10px; }
    .sar-rollup th, .sar-rollup td, .sar-timeline th, .sar-timeline td { padding: 4px 6px; }
    .sar-rollup thead, .sar-timeline thead, .sar-mini thead { display: table-header-group; }
    .sar-detail { max-width: none; }
    .sar-group { border-color: #bbb; }
    .sar-group-header { background: #417690 !important; color: #fff !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .sar-kind, .sar-card, .sar-total-row td, .sar-rollup th, .sar-timeline th, .sar-mini th {
        -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .sar-group, .sar-rollup { break-inside: avoid; }
    .sar-group:has(.sar-timeline tbody tr:nth-child(12)) { break-inside: auto; }
    .sar-timeline tbody tr, .sar-panels { break-inside: avoid; }
    a { color: inherit; text-decoration: none; }
}