/*
    Feature #9723, Story 2 (#9728) — Prior Opt-Out Notice Attestation modal chrome.

    Ported verbatim (literal values, D-23) from
    Blessed Artifacts\mockup-css-attestations-page.css, with the poa- prefix so nothing collides with
    Bootstrap's own .modal / .card / .chip.

    A shared stylesheet rather than two isolated .razor.css files because the import and export modals
    render the SAME chrome — overlay, header, footer, buttons, fields — and duplicating ~150 rules in
    two scopes is how they drift. Precedent: css/rollouts-modal.css, which exists for exactly this
    reason. The page's own layout stays in PriorOptOutAttestations.razor.css (isolated).
*/

/* ── Overlay + shell ── */
.poa-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.poa-modal {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The export modal's combo menus must escape the shell instead of being clipped (mockup does the same). */
.poa-modal.poa-modal-export {
    max-width: 600px;
    overflow: visible;
}

.poa-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 16px 16px 0 0;
}

.poa-modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f3f0ff;
    color: #7c5cdb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.poa-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1f;
    flex: 1;
}

.poa-modal-title small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #6e6e73;
    margin-top: 2px;
}

.poa-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #86868b;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.poa-modal-close:hover {
    background-color: #f5f5f7;
    color: #1d1d1f;
}

.poa-modal-body {
    padding: 24px;
    overflow-y: auto;
}

.poa-modal.poa-modal-export .poa-modal-body {
    overflow: visible;
}

.poa-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: #ffffff;
    border-radius: 0 0 16px 16px;
}

/* ── Buttons ── */
.poa-primary-btn {
    background: linear-gradient(135deg, #7c5cdb 0%, #8b6ce8 100%);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(124, 92, 219, 0.3);
    transition: all 0.3s ease;
}

.poa-primary-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #6d4dcb 0%, #7c5cdb 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 92, 219, 0.4);
}

.poa-primary-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.poa-secondary-btn {
    padding: 12px 24px;
    border: 1.5px solid #d2d2d7;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background-color: #ffffff;
    color: #6e6e73;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.poa-secondary-btn:hover {
    background-color: #f5f5f7;
    border-color: #86868b;
}

.poa-danger-btn {
    padding: 10px 18px;
    border: 1.5px solid #dc3545;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: #ffffff;
    color: #dc3545;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.poa-danger-btn:hover {
    background: #dc3545;
    color: #ffffff;
}

/* ── Fields (export modal) ── */
.poa-field {
    margin-bottom: 20px;
}

.poa-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.poa-req {
    color: #dc3545;
}

.poa-hint {
    font-size: 12px;
    color: #86868b;
    font-weight: 400;
    margin-top: 4px;
}

/* Loading / error / empty / disabled substitutes for the mockup's in-menu states */
.poa-combo-loading,
.poa-combo-empty,
.poa-combo-error,
.poa-combo-disabled {
    padding: 12px 14px;
    border: 1.5px solid #d2d2d7;
    border-radius: 8px;
    font-size: 14px;
    background: #ffffff;
    color: #86868b;
}

.poa-combo-disabled {
    background: #f5f5f7;
    cursor: not-allowed;
}

.poa-combo-error {
    border-color: #f3ccd0;
    background: #fdf1f2;
    color: #7a1f28;
}

/* Plan option: name plus the "N participants" sub-line the mockup renders on the right */
.poa-option-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poa-option-sub {
    margin-left: auto;
    padding-left: 12px;
    font-size: 12px;
    color: #86868b;
    white-space: nowrap;
}

/* Radzen renders each option's Template inside its own item element; make it a row so the
   sub-line can sit right-aligned exactly as the mockup's .co-sub does. */
.poa-modal-export .rz-multiselect-item,
.poa-modal-export .rz-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Import modal: dropzone + file chip ── */
.poa-dropzone {
    position: relative;
    border: 2px dashed #d2d2d7;
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    background: #fafafa;
    transition: all 0.2s;
    cursor: pointer;
}

.poa-dropzone:hover {
    border-color: #7c5cdb;
    background: #f7f4ff;
}

.poa-dropzone-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 12px;
    background: #f3f0ff;
    color: #7c5cdb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.poa-dropzone h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.poa-dropzone p {
    font-size: 13px;
    color: #86868b;
    margin: 0;
}

.poa-dropzone .poa-browse {
    color: #7c5cdb;
    font-weight: 600;
}

/* The real InputFile covers the whole dropzone at zero opacity: click-to-browse like the mockup,
   plus browser-native drag-and-drop for free (an enhancement, not a fidelity requirement — D-58). */
.poa-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.poa-file-formats {
    margin-top: 16px;
    font-size: 12px;
    color: #86868b;
    text-align: center;
}

.poa-file-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e5e5e7;
    border-radius: 10px;
    background: #ffffff;
    margin-top: 4px;
}

.poa-fc-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #e8f5e9;
    color: #28a745;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.poa-fc-meta {
    flex: 1;
    min-width: 0;
}

.poa-fc-name {
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.poa-fc-sub {
    font-size: 12px;
    color: #86868b;
}

.poa-fc-remove {
    background: none;
    border: none;
    color: #86868b;
    cursor: pointer;
    font-size: 20px;
    padding: 4px;
    border-radius: 6px;
}

.poa-fc-remove:hover {
    background: #f5f5f7;
    color: #dc3545;
}

.poa-file-error {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #f3ccd0;
    background: #fdf1f2;
    border-radius: 10px;
    font-size: 13px;
    color: #7a1f28;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ── Import modal: hero, tiles, notes ── */
.poa-results-hero {
    text-align: center;
    padding: 8px 0 22px;
}

.poa-rh-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e8f5e9;
    color: #28a745;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 28px;
}

/* The validation step is neutral purple — nothing has been written yet. */
.poa-rh-icon.validating {
    background: #f3f0ff;
    color: #7c5cdb;
}

.poa-results-hero h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.poa-results-hero p {
    font-size: 14px;
    color: #6e6e73;
    margin: 0;
}

.poa-result-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.poa-result-tile {
    border-radius: 12px;
    padding: 16px 10px;
    text-align: center;
    border: 1px solid;
}

.poa-rt-num {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
}

.poa-rt-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.poa-result-tile.created {
    background: #f0faf3;
    border-color: #cdeed9;
}

.poa-result-tile.created .poa-rt-num,
.poa-result-tile.created .poa-rt-label {
    color: #157347;
}

.poa-result-tile.updated {
    background: #eff5ff;
    border-color: #cfe0fb;
}

.poa-result-tile.updated .poa-rt-num,
.poa-result-tile.updated .poa-rt-label {
    color: #1d4ed8;
}

.poa-result-tile.skipped {
    background: #fff8ec;
    border-color: #f5e3bf;
}

.poa-result-tile.skipped .poa-rt-num,
.poa-result-tile.skipped .poa-rt-label {
    color: #9a6a00;
}

.poa-result-tile.errored {
    background: #fdf1f2;
    border-color: #f3ccd0;
}

.poa-result-tile.errored .poa-rt-num,
.poa-result-tile.errored .poa-rt-label {
    color: #b02a37;
}

.poa-helper-note {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    background: #f3f0ff;
    border-radius: 10px;
    margin-bottom: 16px;
}

.poa-helper-note i {
    color: #7c5cdb;
    flex-shrink: 0;
    margin-top: 2px;
}

.poa-helper-note p {
    font-size: 13px;
    color: #4a3f6b;
    line-height: 1.5;
    margin: 0;
}

.poa-error-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid #f3ccd0;
    background: #fdf1f2;
    border-radius: 12px;
}

.poa-ec-text {
    font-size: 13px;
    color: #7a1f28;
    line-height: 1.5;
    max-width: 320px;
}

.poa-ec-text b {
    font-weight: 700;
}

/* D-51 — the "nothing to import" hint beneath the tiles */
.poa-nothing-hint {
    font-size: 13px;
    color: #9a6a00;
    margin-bottom: 16px;
}

@media (max-width: 1000px) {
    .poa-result-tiles {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Story 5 (#9801) — Import History and Deletion Log sections + the "Filter Imports" modal.
   Ported from Blessed Artifacts\mockup-css-history-extract.css (and the mockup's section/controls/
   filter-modal rules) with the poa- prefix, literal values (D-23). The two sections are child
   components of the page, so their rules live here (global) rather than in the page's isolated
   .razor.css, which would not reach a child component's markup.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* Section spacing (mockup .page-section). This lives in the GLOBAL sheet, not the page's isolated
   .razor.css, because the Import History and Deletion Log section roots are rendered by child
   components: those components have no scoped stylesheet, so they never carry the page's
   b-* scope attribute and an isolated rule cannot match them — the two cards would abut. */
.poa-page-section {
    margin-top: 24px;
    margin-bottom: 28px;
}

/* ── Section heading (mockup .section-heading) ── */
.poa-section-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 14px;
}

.poa-section-heading i {
    font-size: 17px;
    color: #7c5cdb;
    flex-shrink: 0;
}

/* ── Card (mockup .history-card) ── */
.poa-history-card {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ── Controls row (mockup .controls / .controls-top / .controls-right-group) ── */
.poa-controls {
    background-color: #ffffff;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e7;
}

.poa-controls-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.poa-controls-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Count pill — "<b>N</b> imports" / "<b>N</b> deletions" */
.poa-count-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1d1d1f;
    font-size: 14px;
    font-weight: 500;
}

.poa-count-header .poa-count-number {
    color: #7c5cdb;
    font-weight: 600;
}

/* Search box (mockup .search-container / .search-input / .search-clear) */
.poa-search {
    position: relative;
    width: 400px;
    flex-shrink: 0;
}

.poa-search .poa-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #86868b;
    pointer-events: none;
    font-size: 14px;
    z-index: 1;
}

.poa-search .rz-textbox {
    padding: 10px 40px 10px 40px;
    border: 1.5px solid #d2d2d7;
    border-radius: 8px;
    font-size: 14px;
    width: 100%;
    height: auto;
    transition: all 0.2s;
}

.poa-search .rz-textbox:focus {
    outline: none;
    border-color: #7c5cdb;
    box-shadow: 0 0 0 3px rgba(124, 92, 219, 0.1);
}

.poa-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #86868b;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
    z-index: 1;
}

.poa-search-clear:hover {
    color: #1d1d1f;
}

/* Filter button + badge (mockup .filter-btn / .filter-badge) */
.poa-filter-btn {
    padding: 8px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s;
    color: #6e6e73;
}

/* The icon is the mockup's inline SVG (a centred three-bar funnel), so it is sized here rather than
   by font-size as a glyph would be. The width/height attributes on the element say 18 too; this keeps
   it right if the markup ever loses them. */
.poa-filter-btn svg {
    width: 18px;
    height: 18px;
}

.poa-filter-btn:hover,
.poa-filter-btn.has-filters {
    color: #7c5cdb;
}

.poa-filter-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #7c5cdb;
    color: #ffffff;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    text-align: center;
}

/* Deep-link context strip (mockup .hf-fromlink) */
.poa-fromlink {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #faf8ff;
    border-bottom: 1px solid #f0f0f2;
    font-size: 13px;
    color: #4a3f6b;
}

.poa-fromlink i {
    color: #7c5cdb;
    flex-shrink: 0;
}

/* ── Table (mockup .table-container / .data-table), applied to the Radzen grid ── */
.poa-table-container {
    overflow-x: auto;
    position: relative;
}

.poa-history-grid.rz-datatable,
.poa-history-grid .rz-data-grid-data {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.poa-history-grid .rz-grid-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.poa-history-grid .rz-grid-table thead th {
    background-color: #fafafa;
    padding: 14px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: #6e6e73;
    border-bottom: 2px solid #e5e5e7;
}

.poa-history-grid .rz-grid-table thead th .rz-column-title {
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    color: #6e6e73;
    text-transform: none;
}

.poa-history-grid .rz-grid-table td {
    padding: 14px 16px;
    font-size: 14px;
    border-bottom: 1px solid #f5f5f7;
    color: #1d1d1f;
}

.poa-history-grid .rz-grid-table td .rz-cell-data {
    padding: 0;
    white-space: nowrap;
}

.poa-history-grid .rz-grid-table tbody tr.rz-datatable-odd > td {
    background-color: #fbfbfc;
}

.poa-history-grid .rz-grid-table tbody tr:hover > td {
    background-color: #f0f0f2;
}

.poa-history-grid .rz-pager {
    border-top: 1px solid #e5e5e7;
    background: #ffffff;
    padding: 10px 16px;
}

.poa-muted {
    color: #86868b;
    font-size: 13px;
}

.poa-empty-row {
    text-align: center;
    padding: 28px;
    color: #86868b;
    font-size: 13px;
}

.poa-link {
    color: #7c5cdb;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.poa-link:hover {
    text-decoration: underline;
}

/* Source-file link (mockup .file-dl) */
.poa-file-dl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #6e6e73;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.15s;
}

.poa-file-dl i {
    font-size: 14px;
    color: #7c5cdb;
    flex-shrink: 0;
}

.poa-file-dl:hover {
    color: #7c5cdb;
    text-decoration: underline;
}

/* Date / Time cell — time sits under the date to keep the column narrow (mockup .dt-*) */
.poa-dt-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
}

.poa-dt-date {
    color: #1d1d1f;
}

.poa-dt-time {
    color: #86868b;
    font-size: 12px;
}

/* Plan cell — first plan plus a "+N" chip when an import covered several plans (mockup .plan-*) */
.poa-plan-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.poa-plan-more {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    background: #f0ebff;
    color: #7c5cdb;
    font-size: 12px;
    font-weight: 600;
    cursor: default;
    flex-shrink: 0;
}

.poa-plan-more:hover {
    background: #e3dcff;
}

/* Result count chips (mockup .mini-counts / .mini-count) — four columns: the mockup's three plus
   the D-25 "updated" dot; each column only as wide as its widest value so the dots line up. */
.poa-mini-counts {
    display: grid;
    grid-template-columns: 54px 40px 40px auto;
    gap: 14px;
    align-items: center;
}

.poa-mini-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: default;
}

.poa-mini-count .poa-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.poa-mini-count.created {
    color: #157347;
}

.poa-mini-count.created .poa-dot {
    background: #28a745;
}

.poa-mini-count.updated {
    color: #1d4ed8;
}

.poa-mini-count.updated .poa-dot {
    background: #3b82f6;
}

.poa-mini-count.skipped {
    color: #9a6a00;
}

.poa-mini-count.skipped .poa-dot {
    background: #f0ad4e;
}

.poa-mini-count.errored {
    color: #b02a37;
}

.poa-mini-count.errored .poa-dot {
    background: #dc3545;
}

/* ── Filter modal (mockup .filter-modal / .filter-content / .filter-*) — reuses .poa-modal-overlay ── */
.poa-filter-content {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
}

.poa-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 8px 24px;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 10;
}

.poa-filter-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
}

.poa-filter-body {
    padding: 24px;
}

.poa-filter-footer {
    display: flex;
    justify-content: space-between;
    padding: 0 24px 24px 24px;
    position: sticky;
    bottom: 0;
    background: #ffffff;
    border-radius: 0 0 16px 16px;
}

.poa-filter-section {
    margin-bottom: 24px;
}

.poa-filter-section:last-child {
    margin-bottom: 0;
}

.poa-filter-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #86868b;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.poa-filter-date-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.poa-filter-date-group {
    flex: 1;
}

.poa-filter-date-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 6px;
}

.poa-filter-btn-reset {
    padding: 10px 28px;
    border: 1.5px solid #e5e5e7;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background-color: #ffffff;
    color: #555555;
    transition: all 0.2s;
}

.poa-filter-btn-reset:hover {
    background-color: #f5f5f7;
    border-color: #d2d2d7;
}

.poa-filter-btn-apply {
    padding: 10px 28px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg, #7c5cdb 0%, #8b6ce8 100%);
    color: #ffffff;
    transition: all 0.3s ease;
}

.poa-filter-btn-apply:hover {
    background: linear-gradient(135deg, #6d4dcb 0%, #7c5cdb 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 92, 219, 0.3);
}

@media (max-width: 1000px) {
    .poa-controls-top {
        flex-direction: column;
        align-items: stretch;
    }

    .poa-search {
        width: 100%;
    }
}