/* ─────────────────────────────────────────────────────────────────────────────
   Project Reports document pages (Monthly Reports first): the Add/Edit Document
   dialog, the Delete Document confirm, and the grid's Edit/Delete/Responsibility
   columns. Line-for-line port of React:
     AddDocumentModal.css (.add-doc-*), NewProjectWizardPage.css (.npw-field /
     .npw-input / .npw-btn / .npw-assoc-*), StyledSelect.css (form trigger),
     MonthlyReportsPage.css (.add-doc-title-*, .rep-*, .npw-btn-danger, statuses),
     BulletinPage.css (.bulletin-action*, .bulletin-delete-*),
     ResponsibilityNames.css + ProjectInfoPage.css (.resp-*, .pi-dir-user-icon*).
   React's env vars map to the project theme vars:
     --brand-bg    → --projectrac-primary-color   (header, focus ring)
     --brand-hover → --projectrac-secondary-color (primary button, Choose File, user icon)
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Modal chrome ── */
.add-doc-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    /* The project layout sets nowrap on an ancestor; React's modal inherits normal. */
    white-space: normal;
}

.add-doc-modal {
    background: #fff;
    border-radius: 4.8px;
    width: 384px;
    max-width: 90vw;
    box-shadow: 0 6.4px 24px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    font-family: Inter, "Segoe UI", sans-serif;
}

/* .npw-assoc-modal (416px) is overridden on report pages by
   `.reports-page .add-doc-modal { width: 464px }`. */
.add-doc-modal.npw-assoc-modal {
    width: 464px;
    max-width: 92vw;
}

.add-doc-modal-header {
    background: var(--projectrac-primary-color, #222);
    color: #fff;
    padding: 9.6px 14.4px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.add-doc-modal-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 14.4px;
    cursor: pointer;
    padding: 0 3.2px;
    line-height: 1;
}
.add-doc-modal-close.npw-assoc-close {
    font-size: 20.8px;
    line-height: 1;
}
.add-doc-modal-close:hover {
    opacity: 0.8;
}

.add-doc-modal-body {
    padding: 14.4px;
    display: flex;
    flex-direction: column;
    gap: 9.6px;
}

.add-doc-modal-footer {
    padding: 9.6px 14.4px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6.4px;
    border-top: 1px solid #eee;
}

/* ── Fields ── */
.add-doc-overlay .npw-field {
    display: flex;
    flex-direction: column;
    gap: 4.8px;
}

.add-doc-overlay .npw-field-label {
    font-size: 10.4px;
    font-weight: 600;
    color: #555;
}

.add-doc-overlay .npw-input {
    font-family: inherit;
    font-size: 10.4px;
    font-weight: 500;
    color: #333;
    height: 27.2px;
    padding: 0 6.4px;
    border: 1px solid #d9d9d9;
    border-radius: 2.4px;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
}
.add-doc-overlay .npw-input:focus {
    outline: none;
    border-color: #5b9bd5;
    box-shadow: 0 0 0 1.6px rgba(91, 155, 213, 0.15);
}
.add-doc-overlay .npw-input:disabled {
    background: #f0f3f7;
    color: #6b7280;
}
.add-doc-overlay .npw-input::placeholder {
    color: #b0b0b0;
    opacity: 1;
}
/* Description (Meeting / Development dialog). */
.add-doc-overlay .npw-textarea {
    height: auto;
    padding: 4.8px 6.4px;
    line-height: 1.4;
    resize: none;
    overflow-y: auto;
    font-family: inherit;
}

.add-doc-overlay .npw-field-error {
    font-size: 9.6px;
    color: #c0392b;
    padding-left: 7.2px;
}

.add-doc-disabled,
.add-doc-overlay .npw-input.add-doc-disabled {
    background: #f0f0f0 !important;
    color: #999 !important;
    cursor: not-allowed;
}

.add-doc-locked {
    opacity: 0.4;
    pointer-events: none;
}

/* Composite title row: disabled "{Project} Monthly Report" - [Month] [Year] */
.add-doc-title-row {
    display: flex;
    align-items: center;
    gap: 4.8px;
}
.add-doc-title-row input {
    flex: 1;
    min-width: 0;
}
.add-doc-title-sep {
    font-size: 9.6px;
    color: #999;
    font-weight: 500;
}

/* Month / Year — native selects dressed as React's StyledSelect form trigger
   (.styled-select-trigger + -form, sized by .npw-assoc-modal to 27.2px / 10.4px). */
.add-doc-overlay select.add-doc-select {
    -webkit-appearance: none;
    appearance: none;
    height: 27.2px;
    padding: 0 22.4px 0 6.4px;
    font-family: inherit;
    font-size: 10.4px;
    font-weight: 500;
    color: #333;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 6.4px center / 10px 6px;
    border: 1px solid #d9d9d9;
    border-radius: 2.4px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.add-doc-overlay select.add-doc-select:hover:not(:disabled) {
    border-color: #b5b5b5;
}
.add-doc-overlay select.add-doc-select:focus {
    outline: none;
    border-color: var(--projectrac-primary-color, #5b9bd5);
    box-shadow: 0 0 0 1.6px color-mix(in srgb, var(--projectrac-primary-color, #5b9bd5) 18%, transparent);
}
.add-doc-overlay select.add-doc-select.add-doc-select-empty {
    color: #b0b0b0;
}
.add-doc-overlay select.add-doc-select:disabled {
    background-color: #f5f5f5;
    color: #555;
    border-color: #d9d9d9;
    cursor: not-allowed;
}
.add-doc-overlay select.add-doc-select.add-doc-select-empty:disabled {
    color: #b0b0b0;
}
.add-doc-overlay select.add-doc-select option {
    color: #333;
}
.add-doc-overlay select.add-doc-select option:disabled {
    color: #b0b0b0;
}
.add-doc-overlay .add-doc-title-month {
    width: 88px;
    flex: 0 0 88px;
}
.add-doc-overlay .add-doc-title-year {
    width: 64px;
    flex: 0 0 64px;
}

/* ── Attachment ── */
.add-doc-attachment-display {
    display: flex;
    align-items: center;
    height: 27.2px;
    padding: 0 4.8px 0 8px;
    border: 1px solid #d9d9d9;
    border-radius: 2.4px;
    background: #fff;
    box-sizing: border-box;
}
.add-doc-attachment-name {
    display: inline-flex;
    align-items: center;
    gap: 4.8px;
    flex: 1;
    min-width: 0;
    font-size: 10.4px;
    color: #444;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.add-doc-attachment-icon {
    flex-shrink: 0;
    color: #6b7280;
}
.add-doc-attachment-clear {
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: 0 3.2px;
    font-family: inherit;
    font-size: 14.4px;
    line-height: 1;
    color: #999;
    cursor: pointer;
}
.add-doc-attachment-clear:hover {
    color: #c0392b;
}

.add-doc-file-input {
    font-size: 9.6px !important;
    padding: 3.2px !important;
    background: #fff;
    height: 27.2px;
    width: 100%;
    border: 1px solid #d9d9d9;
    border-radius: 2.4px;
    box-sizing: border-box;
}
.add-doc-file-input::file-selector-button {
    background: var(--projectrac-secondary-color, #5b9bd5);
    border: none;
    border-radius: 2.4px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 8.8px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    margin-right: 6.4px;
}
.add-doc-file-input::file-selector-button:hover {
    background: color-mix(in srgb, var(--projectrac-secondary-color, #5b9bd5) 85%, black);
}
/* The picker stays mounted while a file is shown (Blazor's InputFile must). */
.add-doc-file-input.add-doc-hidden {
    display: none;
}

/* ── Footer buttons ── */
.add-doc-overlay .npw-btn {
    font-family: inherit;
    font-size: 10.4px;
    font-weight: 600;
    padding: 6.4px 14.4px;
    border-radius: 3.2px;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: normal;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.add-doc-overlay .npw-btn:disabled {
    cursor: not-allowed;
}
.add-doc-overlay .npw-btn-primary {
    background: var(--projectrac-secondary-color, #5b9bd5);
    border-color: var(--projectrac-secondary-color, #5b9bd5);
    color: #fff;
}
.add-doc-overlay .npw-btn-primary:not(:disabled):hover {
    background: color-mix(in srgb, var(--projectrac-secondary-color, #5b9bd5) 85%, black);
    border-color: color-mix(in srgb, var(--projectrac-secondary-color, #5b9bd5) 85%, black);
}
.add-doc-overlay .npw-btn-primary:disabled {
    background: #ccc;
    border-color: #ccc;
    color: #999;
}
.add-doc-overlay .npw-btn-danger {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}
.add-doc-overlay .npw-btn-danger:not(:disabled):hover {
    background: #a93226;
    border-color: #a93226;
}

/* ── Delete Document confirm ── */
.add-doc-modal.bulletin-delete-modal {
    max-width: 320px;
}
.bulletin-delete-body p {
    font-size: 11.2px;
    color: #333;
    margin: 0 0 9.6px;
}
.bulletin-delete-detail {
    font-size: 10.4px;
    color: #555;
    padding: 3.2px 0;
}
.bulletin-delete-label {
    font-size: 10.4px;
    font-weight: 600;
    margin-right: 4.8px;
    color: #333;
}

/* ── Grid: Document title, Responsibility, Edit / Delete columns ── */
/* React's report tables leave Document / Date / Status / Responsibility at
   width:auto, so they share the spare width and the 32px action columns stay
   32px. PortalGrid makes a no-Width column a 1px "shrink" column; undo that. */
.pg-table th.rep-col-auto,
.pg-table td.rep-col-auto {
    width: auto;
}
.pg-table td.rep-doc-title {
    font-weight: 500 !important;
}
.pg-table td.rep-resp-col {
    color: #333;
}
/* Description column (React ResourcesPage.css .aa-desc-col). */
.pg-table td.aa-desc-col {
    font-size: 8px !important;
    color: #666;
    max-width: 280px;
}

.pg-status-under-review { color: #856404; background-color: #fff3cd; }
.pg-status-under-review::before { background-color: #856404; }

.resp-names {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3.2px 9.6px;
    color: var(--projectrac-secondary-color, #5b9bd5);
    min-width: 0;
}
.resp-name {
    display: inline-flex;
    align-items: center;
    gap: 4.8px;
    min-width: 0;
}
.resp-name-text {
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.resp-empty {
    color: #333;
}
.resp-names .pi-dir-user-iconwrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16.8px;
    height: 16.8px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--projectrac-secondary-color, #5b9bd5) 15%, white);
    cursor: default;
    flex-shrink: 0;
}
.resp-names .pi-dir-user-iconwrap .pi-dir-user-icon {
    width: 10.4px;
    height: 10.4px;
}

.pg-table th.bulletin-actions-col,
.pg-table td.bulletin-actions-col {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    text-align: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
}

.bulletin-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2.4px;
    border-radius: 2.4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.15s;
    margin: 0 auto;
    position: relative;
}
.bulletin-action-btn.disabled {
    cursor: default;
    pointer-events: none;
}
.bulletin-action-btn.disabled .bulletin-action-icon {
    filter: brightness(0) saturate(100%) invert(85%) !important;
    color: #ccc !important;
}

.bulletin-action-icon {
    width: 11.2px;
    height: 11.2px;
    object-fit: contain;
}
.bulletin-edit-btn .bulletin-action-icon {
    opacity: 0.4;
    filter: brightness(0) saturate(100%) invert(17%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
    transition: filter 0.2s, opacity 0.2s;
}
.bulletin-edit-btn:hover .bulletin-action-icon {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(59%) sepia(52%) saturate(405%) hue-rotate(176deg) brightness(92%) contrast(89%);
}
.bulletin-delete-icon {
    color: #c0392b;
}
.bulletin-delete-btn:hover .bulletin-delete-icon {
    color: #e74c3c;
}

.bulletin-header-action-icon {
    width: 11.2px;
    height: 11.2px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.bulletin-header-edit-icon {
    filter: brightness(0) invert(0.2);
}
.bulletin-header-delete-icon {
    color: #333;
}

/* "File type not set up" notice above the grid. */
.mr-setup-error {
    font-size: 10.4px;
    color: #c0392b;
    padding: 6.4px 0;
}

/* ── File-type editor page (Pages/ProjectFileTypePage: Project Resources / Bulletin) ──
   React ProjectResourcesPage / ProjectBulletinPage. */

/* Title band back link (React .content-title-divider / .content-title-back), inside
   the manager .mgr-content-title band. Same values as the .home-page copies in app.css. */
.mgr-content-title .content-title-divider {
    flex-shrink: 0;
    width: 1px;
    height: 14.4px;
    margin-left: 16px;
    margin-right: 9.6px;
    background-color: #bbb;
}
.mgr-content-title .content-title-back {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 8.8px;
    font-weight: 500;
    color: #999;
    text-decoration: none;
    cursor: pointer;
}
.mgr-content-title .content-title-back-icon {
    width: 11.2px;
    height: 11.2px;
    object-fit: contain;
    opacity: 0.5;
    filter: none;
}

/* Category pills (React ResourcesPage.css / BulletinPage.css .aa-status-*): no dot. */
.pg-status.pf-category::before { display: none; }
.pf-category-policies { color: #2874a6; background-color: #d6eaf8; }
.pf-category-guides   { color: #7d3c98; background-color: #f4ecf7; }
.pf-category-templates { color: #b9770e; background-color: #fef9e7; }
.pf-category-news     { color: #7d3c98; background-color: #f4ecf7; }
.pf-category-research { color: #1e7e34; background-color: #d4edda; }

/* Star column (React .resource-star-btn): grey outline, gold when starred / on hover. */
.resource-star-btn { color: #ccc; }
.resource-star-btn:hover:not(:disabled),
.resource-star-btn.starred { color: #f0b840; }
.resource-star-btn:disabled { cursor: not-allowed; opacity: 0.3; }
.resource-star-btn.starred:disabled { opacity: 1; cursor: default; }
.resource-header-star-icon { display: block; margin: 0 auto; }

/* Row icon for files that download (React: Download-icon.svg for templates). */
.br-view-icon.pf-view-download {
    -webkit-mask-image: url("/icons/Download-icon.svg");
    mask-image: url("/icons/Download-icon.svg");
}

/* ── Editor page column model (React .aa-table, table-layout:auto) ───────────
   Only these columns are fixed; Title / Category / Type / Description / Source /
   Date have no width and size from their content, exactly as React's do. */

/* Icon column (React .aa-icon-col): 28.8px INCLUDING the normal 9.6px side
   padding (border-box), no separator on either side of it. The 17.6px badge
   overflows the 9.6px content box (overflow visible), as in React. */
.pf-page .pg-table th.pf-icon-col,
.pf-page .pg-table td.pf-icon-col {
    width: 28.8px;
    min-width: 28.8px;
    max-width: 28.8px;
    box-sizing: border-box;
    overflow: visible;
    border-right: none !important;
}
.pf-page .pg-table th.pf-icon-col + th,
.pf-page .pg-table td.pf-icon-col + td {
    border-left: none !important;
}

/* Star / Edit / Delete (React th/td.bulletin-actions-col): exactly 32px, no side padding. */
.pf-page .pg-table th.pf-action-col,
.pf-page .pg-table td.pf-action-col {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    box-sizing: border-box;
    text-align: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
}
/* React .aa-table thead th:first-child { border-right: none !important } — the
   Resources star column header has no separator. */
.pf-page .pg-table thead th:first-child {
    border-right: none !important;
}

/* Description (React ResourcesPage.css .aa-desc-col). */
.pf-page .pg-table td.pf-desc-col {
    font-size: 8px !important;
    color: #666;
    max-width: 280px;
}

/* Title (React .aa-action-link): body text at rest; accent + underline while the
   title or the row's open badge is hovered. */
.pf-title-link {
    cursor: pointer;
    transition: color 0.2s;
}
.pf-title-link:hover,
.pg-table tr:has(.br-view-badge:hover) .pf-title-link {
    color: var(--projectrac-secondary-color);
    text-decoration: underline;
}

/* PortalGrid gives every Width-less column `pg-col-shrink` (width:1px). With every
   column then "sized", the browser spreads the table's slack over ALL columns,
   fixed ones included (32px → 47.6px). React's data columns have NO width, so only
   they absorb the slack and the fixed columns stay exact — do the same here. */
.pf-page .pg-table th.pg-col-shrink:not(.pf-icon-col):not(.pf-action-col),
.pf-page .pg-table td.pg-col-shrink:not(.pf-icon-col):not(.pf-action-col) {
    width: auto;
}

/* ── Add Contact (Project Directory; React AddContactModal → AddDocumentModal.css) ──
   Submit button + inline field error. --brand-hover = the project accent here. */
.add-doc-submit-btn {
    background: var(--projectrac-secondary-color, #5b9bd5);
    border: none;
    border-radius: 3.2px;
    padding: 4.8px 12.8px;
    font-family: inherit;
    font-size: 9.6px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
}

.add-doc-submit-btn:focus {
    outline: none;
}

.add-doc-file-error {
    font-size: 8.8px;
    color: #c0392b;
    font-weight: 500;
    margin-top: 1.6px;
}

.add-doc-submit-disabled {
    background: #ccc;
    color: #999;
    cursor: not-allowed;
}

.add-contact-submit-ready {
    background: var(--projectrac-secondary-color, #5b9bd5);
}

.add-contact-submit-ready:hover:not(:disabled) {
    opacity: 0.85;
}