/* Import Excel Toolbar styles */
@import '../shared/toolbar/excel-toolbar.css';

/* ============================================================================
   RFI MODULE STYLES
   Follows same patterns as procurement-styles.css and gantt-container sections
   ============================================================================ */

/* ═══════════════════════════════════════════════════════════════════════════════
   GRID MODALS & OVERLAYS — z-index !important overrides
   All ExcelGridBase modals render inside .rfis-container which has overflow:hidden.
   Without position:fixed + high z-index, they clip or render behind the grid.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Column Menu (3-dot ⋮ dropdown) */
.rfis-container .column-menu,
.rfis-container .egb-column-menu {
    z-index: 99999 !important;
    position: fixed !important;
}

/* Advanced Filter Modal (funnel icon click → filter options)
   Keep stacking/positioning but DO NOT force display/visibility/opacity. The manager
   toggles display inline between 'none' and 'block'; forcing always-visible here made
   the modal appear on grid mount. See 2026-04-17 hotfix. */
.rfis-container .advanced-filter-modal,
.advanced-filter-modal {
    z-index: 99999 !important;
    position: fixed !important;
}

/* Context Menu (right-click) */
.rfis-container .context-menu,
.rfis-container .egb-context-menu {
    z-index: 99999 !important;
    position: fixed !important;
}

/* Column Visibility Modal */
.rfis-container .column-visibility-modal,
.rfis-container .egb-column-visibility-modal {
    z-index: 99999 !important;
}

/* Conditional Format Modal */
.rfis-container .conditional-format-modal {
    z-index: 99999 !important;
}

/* Column Group Modal */
.rfis-container .column-group-modal {
    z-index: 99999 !important;
}

/* Search highlight overlay (SearchManager) */
.rfis-container .search-highlight {
    z-index: 5 !important;
}

/* ── Filter Row — funnel icon positioning ────────────────────────────────────
   AdvancedFilterUI injects icons into filter-row th cells.
   th must be position:relative so the absolute-positioned funnel icon works.
   Manager sets this inline too, but CSS backup ensures it persists re-renders. */
.rfis-container .filter-row th {
    position: relative !important;
}

/* Funnel icon — ensure visible above filter input */
.rfis-container .filter-row .advanced-filter-trigger {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    cursor: pointer !important;
    opacity: 0.6;
    transition: opacity 0.15s, color 0.15s;
}

.rfis-container .filter-row .advanced-filter-trigger:hover {
    opacity: 1 !important;
    color: #2563eb !important;
}

.rfis-container .filter-row .advanced-filter-trigger.active {
    opacity: 1 !important;
    color: #1a73e8 !important;
    background: #e8f0fe !important;
    border-radius: 3px;
}

/* Filter input padding — leave room for funnel icon on right */
.rfis-container .filter-row .column-filter {
    padding-right: 28px !important;
}

/* Active filter highlight on input */
.rfis-container .filter-row th.has-active-filter .column-filter {
    background: #e8f0fe !important;
    border-color: #1a73e8 !important;
}

/* --- View Filter Bar (replaces sidebar sub-items) --- */
.rfis-view-bar {
    display: flex;
    gap: 2px;
    padding: 6px 16px;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    flex-wrap: wrap;
}

.rfis-view-btn {
    padding: 5px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.rfis-view-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

.rfis-view-btn.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.rfis-view-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    padding: 0 4px;
    background: rgba(0,0,0,0.1);
}

.rfis-view-btn.active .rfis-view-count {
    background: rgba(255,255,255,0.25);
}

/* --- Toolbar Container (Excel Toolbar) --- */
.rfis-container .toolbar-container {
    display: block;
    width: 100%;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    z-index: 10000 !important;
}

.rfis-header .toolbar-container .excel-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
}

/* CRITICAL: Override SearchManager's display:none rule */
.rfis-header .toolbar-container .toolbar-group .search-box {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    width: auto !important;
    min-width: auto !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.rfis-header .toolbar-container .search-box input {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 180px !important;
    height: auto !important;
    padding: 8px 12px 8px 32px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    background: white !important;
    color: #495057 !important;
    line-height: normal !important;
    box-sizing: border-box !important;
}

.rfis-header .toolbar-container .search-box i {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #6c757d !important;
    font-size: 13px !important;
    pointer-events: none !important;
}

/* --- Main RFIs Container --- */
.rfis-container {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    background: #f8f9fa;
    overflow: hidden;
}

/* --- RFIs Header --- */
.rfis-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background: white;
    border-bottom: 2px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
}

.rfis-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid #e9ecef;
}

.rfis-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.rfis-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.rfis-actions button {
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rfis-actions .btn-primary {
    background: #2563eb;
    color: #fff;
    border: none;
}

.rfis-actions .btn-primary:hover {
    background: #1d4ed8;
}

.rfis-actions .rfi-export-btn,
.rfis-actions .rfi-settings-btn {
    background: #fff;
    border: 1px solid #dee2e6;
    color: #495057;
}

.rfis-actions .rfi-export-btn:hover,
.rfis-actions .rfi-settings-btn:hover {
    background: #f8f9fa;
    border-color: #2563eb;
    color: #2563eb;
}

/* --- Content Area --- */
.rfis-content {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.rfis-grid-container {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.rfis-detail-wrapper {
    display: none;
    flex: 1;
    overflow: auto;
}

/* ============================================================================
   STATUS BADGES
   ============================================================================ */

.rfis-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.rfis-status-draft {
    background: #e9ecef;
    color: #495057;
}

.rfis-status-open {
    background: #dbeafe;
    color: #1d4ed8;
}

.rfis-status-closed {
    background: #d1fae5;
    color: #065f46;
}

.rfis-status-closeddraft {
    background: #d1fae5;
    color: #065f46;
}

.rfis-status-closedrevised {
    background: #d1fae5;
    color: #065f46;
}

.rfis-status-overdue {
    background: #fee2e2;
    color: #991b1b;
}

/* ============================================================================
   DETAIL VIEW -- Info Panel
   ============================================================================ */

.rfi-info-panel {
    width: 270px;
    flex-shrink: 0;
    padding: 12px 16px;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
    font-size: 10.5px;
    background: #fff;
}

.rfi-info-heading {
    font-weight: 700;
    margin-bottom: 8px;
    color: #212529;
}

.rfi-info-field {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid #e9ecef;
}

.rfi-info-label {
    color: #6c757d;
}

.rfi-info-value {
    font-weight: 500;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

/* ============================================================================
   DETAIL VIEW -- Responses
   ============================================================================ */

.rfis-empty-state {
    color: #6c757d;
    padding: 20px;
    text-align: center;
    font-size: 12px;
}

.rfis-response-card {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    margin-bottom: 8px;
    position: relative;
}

.rfis-response-official {
    border: 2px solid #10b981;
    background: #f0fdf4;
}

.rfis-official-badge {
    position: absolute;
    top: -7px;
    right: 10px;
    background: #10b981;
    color: #fff;
    font-size: 8.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 3px;
}

.rfis-response-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 11.5px;
}

.rfis-response-date {
    font-size: 10px;
    color: #6c757d;
}

.rfis-response-text {
    font-size: 11.5px;
    line-height: 1.5;
}

/* ============================================================================
   DETAIL VIEW -- History
   ============================================================================ */

.rfis-history-item {
    padding: 4px 0;
    border-bottom: 1px solid #e9ecef;
    font-size: 11px;
}

.rfis-history-header {
    display: flex;
    justify-content: space-between;
}

.rfis-history-date {
    color: #6c757d;
    font-size: 10px;
}

.rfis-history-user {
    color: #495057;
    font-size: 10px;
}

/* ============================================================================
   DETAIL VIEW -- Attachments
   ============================================================================ */

.rfis-attachment-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin-bottom: 4px;
}

.rfis-attachment-icon {
    font-size: 16px;
}

.rfis-attachment-info {
    flex: 1;
    font-size: 11px;
}

.rfis-attachment-name {
    font-weight: 500;
}

.rfis-attachment-size {
    color: #6c757d;
    font-size: 10px;
}

.rfis-attachment-download {
    padding: 3px 8px;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    background: #fff;
    font-size: 10px;
    cursor: pointer;
}

.rfis-attachment-download:hover {
    background: #f8f9fa;
    border-color: #2563eb;
    color: #2563eb;
}

/* ============================================================================
   DETAIL VIEW -- Revisions
   ============================================================================ */

.rfis-revision-card {
    padding: 8px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    margin-bottom: 6px;
    background: #fafafa;
}

.rfis-revision-current {
    border: 1.5px solid #2563eb;
    background: #dbeafe;
}

.rfis-revision-title {
    font-weight: 500;
    font-size: 11.5px;
}

.rfis-revision-current .rfis-revision-title {
    font-weight: 700;
}

.rfis-revision-meta {
    font-size: 10px;
    color: #495057;
}

/* ============================================================================
   MODAL -- Create RFI
   ============================================================================ */

.rfis-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.45) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    z-index: 99999 !important;
    padding-top: 30px !important;
    overflow: auto !important;
}

.rfis-modal-dialog {
    background: #fff !important;
    border-radius: 10px;
    padding: 20px;
    width: 580px;
    max-width: 96vw;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    z-index: 100000 !important;
    position: relative !important;
}

.rfis-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.rfis-modal-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: #212529;
}

.rfis-modal-body {
    display: flex;
    gap: 12px;
}

.rfis-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px;
}

/* --- Modal Buttons --- */
.rfis-btn-primary {
    padding: 6px 14px;
    border: none;
    border-radius: 5px;
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.rfis-btn-primary:hover {
    background: #1d4ed8;
}

.rfis-btn-draft {
    padding: 6px 14px;
    border: none;
    border-radius: 5px;
    background: #6c757d;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
}

.rfis-btn-draft:hover {
    background: #5a6268;
}

.rfis-btn-secondary {
    padding: 6px 14px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    background: #fff;
    font-size: 11px;
    color: #495057;
    cursor: pointer;
}

.rfis-btn-secondary:hover {
    background: #f8f9fa;
}

.rfis-btn-sm {
    padding: 4px 10px;
    font-size: 10.5px;
}

/* --- Modal Form Fields --- */
.rfis-form-column {
    flex: 1;
}

.rfis-form-label {
    display: block;
    font-size: 9.5px;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.rfis-form-input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    font-size: 11.5px;
    margin-bottom: 8px;
    color: #212529;
}

.rfis-form-input:focus,
.rfis-form-textarea:focus,
.rfis-form-select:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}

.rfis-form-textarea {
    width: 100%;
    height: 60px;
    padding: 6px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    font-size: 11.5px;
    resize: vertical;
    margin-bottom: 8px;
    color: #212529;
}

.rfis-form-select {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    font-size: 11.5px;
    margin-bottom: 8px;
    color: #212529;
    background: #fff;
}

.rfis-form-row {
    display: flex;
    gap: 6px;
}

.rfis-form-half {
    flex: 1;
}

/* ============================================================================
   AI DRAFT AGENT (purple accent -- AI branding exception, not Bootstrap)
   ============================================================================ */

.rfis-ai-btn {
    padding: 4px 10px;
    border: 1px solid #7c3aed;
    border-radius: 5px;
    background: #f5f3ff;
    font-size: 10.5px;
    color: #7c3aed;
    font-weight: 600;
    cursor: pointer;
}

.rfis-ai-btn:hover {
    background: #ede9fe;
}

.rfis-ai-panel {
    background: #f5f3ff;
    border: 1px solid #c4b5fd;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
}

.rfis-ai-prompt-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #7c3aed;
    margin-bottom: 4px;
}

.rfis-ai-textarea {
    width: 100%;
    height: 50px;
    padding: 6px;
    border: 1px solid #c4b5fd;
    border-radius: 5px;
    font-size: 11.5px;
    resize: vertical;
}

.rfis-ai-textarea:focus {
    border-color: #7c3aed;
    outline: none;
    box-shadow: 0 0 0 2px rgba(124,58,237,0.15);
}

.rfis-ai-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 6px;
}

.rfis-ai-generate-btn {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    background: #7c3aed;
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
}

.rfis-ai-generate-btn:hover {
    background: #6d28d9;
}

.rfis-ai-success {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 12px;
    font-size: 10.5px;
    color: #065f46;
    font-weight: 600;
}

/* ─── Subtitle (#12) ──────────────────────────────────────────── */

.rfis-subtitle {
    font-size: 12px;
    color: #6c757d;
    margin-left: 8px;
    font-weight: 400;
}

/* ─── Per-row action buttons (#6, #10) ────────────────────────── */

.rfi-row-action {
    padding: 2px 8px;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    background: #fff;
    color: #495057;
    font-size: 10px;
    cursor: pointer;
    margin-right: 2px;
    transition: all 0.15s;
}

.rfi-row-action:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.rfi-row-pdf:hover {
    background: #dc2626;
    border-color: #dc2626;
}

/* ─── Pagination bar (#7) ─────────────────────────────────────── */

.rfis-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
    font-size: 12px;
    color: #495057;
}

.rfis-pagination-info {
    font-size: 11px;
    color: #6c757d;
}

.rfis-pagination-btns {
    display: flex;
    gap: 6px;
}

.rfis-pagination-btns button {
    padding: 4px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
    color: #495057;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

.rfis-pagination-btns button:hover:not(:disabled) {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.rfis-pagination-btns button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ─── Mark Official button (#3) ───────────────────────────────── */

.rfi-mark-official-btn {
    margin-left: auto;
    padding: 2px 8px;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    background: #fff;
    color: #6c757d;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.rfi-mark-official-btn:hover {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

.rfis-response-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── Forwards section (#4) ───────────────────────────────────── */

.rfis-forwards-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.rfis-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 10px;
}

.rfis-forward-card {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fafafa;
    font-size: 11px;
}

.rfis-forward-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.rfis-forward-status {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}

.rfis-forward-pending {
    background: #fef3c7;
    color: #92400e;
}

.rfis-forward-responded {
    background: #d1fae5;
    color: #065f46;
}

.rfis-forward-notes {
    color: #6c757d;
    margin-top: 4px;
    font-style: italic;
}

.rfis-forward-response {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #e9ecef;
    color: #374151;
}

/* ─── Attachment upload zone (#2) ─────────────────────────────── */

.rfis-upload-zone {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid #e9ecef;
}

.rfis-att-upload-btn {
    padding: 5px 14px;
    border: 1px dashed #94a3b8;
    border-radius: 4px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.rfis-att-upload-btn:hover {
    background: #e0f2fe;
    border-color: #2563eb;
    color: #2563eb;
}

.rfis-upload-status {
    font-size: 11px;
    color: #6c757d;
}

/* ─── Create modal attachments (#2) ───────────────────────────── */

.rfis-create-file-list {
    max-height: 100px;
    overflow-y: auto;
}

.rfis-pending-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 6px;
    font-size: 11px;
    color: #374151;
    background: #f1f5f9;
    border-radius: 3px;
    margin-bottom: 2px;
}

.rfis-pending-remove {
    border: none;
    background: none;
    color: #ef4444;
    font-size: 14px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.rfis-pending-remove:hover {
    color: #dc2626;
}

/* ─── Settings modal sections (#8) ────────────────────────────── */

.rfis-settings-section {
    font-size: 11px;
    font-weight: 700;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 14px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e0e7ff;
}

/* ─── Saved view grouping label (#13) ─────────────────────────── */

.rfis-nav-group-label {
    font-size: 9px;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 8px 2px 32px;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   RFI DETAIL VIEW REDESIGN — Option B Professional Two-Panel
   ═══════════════════════════════════════════════════════════════ */

@import '../shared/managers/mentions/mention-styles.css';

/* ─── 8.1 Workflow Stepper ──────────────────────────────────── */
.rfi-stepper { display:flex; align-items:center; gap:0; padding:10px 16px; background:#f9fafb; border-bottom:1px solid #e5e7eb; flex-shrink:0; }
.rfi-step { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:600; color:#9ca3af; }
.rfi-step.done { color:#065f46; }
.rfi-step.active { color:#2563eb; }
.rfi-step-dot { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; border:2px solid #d1d5db; color:#9ca3af; background:#fff; }
.rfi-step.done .rfi-step-dot { background:#10b981; border-color:#10b981; color:#fff; }
.rfi-step.active .rfi-step-dot { background:#2563eb; border-color:#2563eb; color:#fff; }
.rfi-step-line { width:24px; height:2px; background:#d1d5db; margin:0 2px; }
.rfi-step-line.done { background:#10b981; }

/* ─── 8.2 Question Hero ─────────────────────────────────────── */
.rfi-question-hero { padding:16px 20px; border-bottom:1px solid #e5e7eb; background:#fff; flex-shrink:0; }
.rfi-question-hero .rfi-q-label { font-size:9px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.rfi-question-hero .rfi-q-text { font-size:13.5px; line-height:1.65; color:#1f2937; }
.rfi-q-refs { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.rfi-q-ref { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:4px; font-size:10px; color:#4b5563; }

/* ─── 8.3 Overdue Badge ─────────────────────────────────────── */
.rfi-overdue-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:999px; font-size:9px; font-weight:700; background:#fee2e2; color:#991b1b; animation:rfi-pulse 2s infinite; }
@keyframes rfi-pulse { 0%,100%{opacity:1;} 50%{opacity:.6;} }

/* ─── 8.4 BIC Chip ──────────────────────────────────────────── */
.rfi-bic { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:4px; font-size:10px; font-weight:600; }
.rfi-bic-you { background:#dbeafe; color:#1e40af; }
.rfi-bic-other { background:#fef3c7; color:#92400e; }

/* ─── 8.5 Compose Area ──────────────────────────────────────── */
.rfi-compose { border-top:1px solid #e5e7eb; padding:10px 16px; background:#f9fafb; flex-shrink:0; }
.rfi-compose-box { border:1px solid #d1d5db; border-radius:8px; background:#fff; overflow:hidden; }
.rfi-compose-toolbar { display:flex; align-items:center; gap:2px; padding:4px 8px; border-bottom:1px solid #f3f4f6; }
.rfi-compose-toolbar button { background:none; border:none; padding:3px 6px; border-radius:3px; cursor:pointer; color:#6b7280; font-size:12px; }
.rfi-compose-toolbar button:hover { background:#f3f4f6; }
.rfi-compose-area { min-height:60px; padding:8px 12px; font-size:12px; color:#1f2937; line-height:1.5; outline:none; }
.rfi-compose-area:empty::before { content:attr(data-placeholder); color:#9ca3af; }
.rfi-compose-footer { display:flex; align-items:center; justify-content:space-between; padding:6px 8px; border-top:1px solid #f3f4f6; }
.rfi-compose-attach { font-size:10px; color:#6b7280; background:none; border:1px dashed #d1d5db; padding:3px 8px; border-radius:4px; cursor:pointer; }
.rfi-compose-attach:hover { border-color:#2563eb; color:#2563eb; }

/* ─── Info Panel Rows (matches mockup 10.5px / 5px density) ── */
.rfi-info-row { display:flex; justify-content:space-between; align-items:center; padding:5px 10px; border-bottom:1px solid #f3f4f6; font-size:10.5px; }
.rfi-info-k { color:#6b7280; }
.rfi-info-v { font-weight:500; color:#374151; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
.rfi-section-label { font-size:9px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.5px; margin:12px 0 6px; }
.rfi-section-label:first-child { margin-top:0; }

/* ─── 8.6 Assignee Table ────────────────────────────────────── */
.rfi-assignee-table { width:100%; border-collapse:collapse; font-size:10px; margin:6px 0; }
.rfi-assignee-table th { text-align:left; padding:4px 8px; color:#6b7280; font-weight:600; border-bottom:1px solid #e5e7eb; background:#f9fafb; }
.rfi-assignee-table td { padding:5px 8px; border-bottom:1px solid #f3f4f6; }
.rfi-avatar { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#fff; margin-right:4px; vertical-align:middle; }
.rfi-responded-yes { color:#10b981; font-weight:700; }
.rfi-responded-no { color:#9ca3af; }
.rfi-add-assignee-btn { width:100%; margin-top:6px; padding:4px; border:1px dashed #d1d5db; border-radius:4px; background:none; font-size:9px; color:#6b7280; cursor:pointer; }
.rfi-add-assignee-btn:hover { border-color:#2563eb; color:#2563eb; }

/* ─── 8.7 Visual Timeline ───────────────────────────────────── */
.rfi-tl { padding:4px 0; }
.rfi-tl-item { display:flex; gap:8px; padding:4px 0; position:relative; }
.rfi-tl-item:not(:last-child)::before { content:''; position:absolute; left:9px; top:22px; bottom:-4px; width:2px; background:#e5e7eb; }
.rfi-tl-dot { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; z-index:1; }
.rfi-tl-dot.bl { background:#dbeafe; color:#2563eb; border:2px solid #2563eb; }
.rfi-tl-dot.gr { background:#d1fae5; color:#10b981; border:2px solid #10b981; }
.rfi-tl-dot.gy { background:#f3f4f6; color:#9ca3af; border:2px solid #d1d5db; }
.rfi-tl-dot.am { background:#fef3c7; color:#f59e0b; border:2px solid #f59e0b; }
.rfi-tl-dot.rd { background:#fee2e2; color:#ef4444; border:2px solid #ef4444; }
.rfi-tl-body { flex:1; }
.rfi-tl-title { font-size:11px; font-weight:500; color:#374151; }
.rfi-tl-sub { font-size:9.5px; color:#9ca3af; }

/* ─── 8.8 Official Response Ribbon ──────────────────────────── */
.rfi-official-ribbon { position:absolute; top:-1px; right:12px; background:#10b981; color:#fff; font-size:8px; font-weight:800; padding:2px 8px 3px; border-radius:0 0 4px 4px; letter-spacing:.5px; text-transform:uppercase; }
.rfi-response-separator { font-size:10px; color:#9ca3af; text-transform:uppercase; font-weight:600; padding:12px 0 6px; border-top:1px solid #e5e7eb; margin-top:8px; letter-spacing:.3px; }

/* ─── 8.9 Inline Editable Fields ────────────────────────────── */
.rfi-editable { cursor:pointer; border-bottom:1px dashed transparent; transition:all .15s; position:relative; }
.rfi-editable:hover { border-color:#2563eb; color:#2563eb; }
.rfi-editable::after { content:'✎'; font-size:9px; color:#2563eb; margin-left:3px; opacity:0; transition:opacity .15s; }
.rfi-editable:hover::after { opacity:1; }
.rfi-editable-input { width:100%; padding:2px 4px; border:1px solid #2563eb; border-radius:3px; font-size:10.5px; outline:none; }

/* ─── 8.10 Attachment Row, Preview, Delete ───────────────────── */
.rfi-att-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid #e5e7eb; border-radius:5px; margin-bottom:4px; background:#fff; }
.rfi-att-info { flex:1; min-width:0; }
.rfi-att-name { font-size:10.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rfi-att-size { font-size:9px; color:#9ca3af; }
.rfi-att-actions { display:flex; gap:4px; flex-shrink:0; }
.rfi-att-preview-btn, .rfi-att-actions .rfis-att-dl, .rfi-att-actions .rfis-attachment-download { padding:2px 6px; border:1px solid #d1d5db; border-radius:3px; font-size:9px; background:#fff; color:#4b5563; cursor:pointer; }
.rfi-att-preview-btn:hover, .rfi-att-actions .rfis-att-dl:hover, .rfi-att-actions .rfis-attachment-download:hover { border-color:#2563eb; color:#2563eb; }
.rfis-attachment-delete { border:none; background:none; color:#ef4444; font-size:14px; cursor:pointer; padding:0 4px; }
.rfis-attachment-delete:hover { color:#dc2626; }
.rfis-att-preview { width:40px; height:40px; border-radius:4px; background:#f3f4f6; display:flex; align-items:center; justify-content:center; font-size:9px; color:#9ca3af; overflow:hidden; flex-shrink:0; }
.rfis-att-preview img { width:100%; height:100%; object-fit:cover; }

/* ─── Gap 2 Overflow Menu ───────────────────────────────────── */
.rfi-overflow-menu { position:absolute; right:0; top:100%; background:#fff; border:1px solid #e5e7eb; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.12); min-width:160px; z-index:99999; padding:4px 0; }
.rfi-overflow-item { padding:6px 14px; font-size:11px; cursor:pointer; color:#374151; }
.rfi-overflow-item:hover { background:#f3f4f6; }
.rfi-overflow-item.danger { color:#ef4444; }

/* ─── Detail Tabs Bar ──────────────────────────────────────── */
.rfi-detail-tabs { display:flex; border-bottom:1px solid #e5e7eb; background:#fff; flex-shrink:0; padding:0 16px; }
.rfi-tab-btn { padding:8px 14px; border:none; background:none; cursor:pointer; font-size:11px; border-bottom:2px solid transparent; color:#6b7280; position:relative; }
.rfi-tab-btn.active { color:#2563eb; border-bottom-color:#2563eb; font-weight:600; }

/* ─── Gap 8 Tab Count Badges ────────────────────────────────── */
.rfi-tab-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; border-radius:9px; font-size:10px; font-weight:700; margin-left:5px; padding:0 5px; }
.rfi-tab-count.has { background:#d1fae5; color:#065f46; }
.rfi-tab-count.empty { background:#f3f4f6; color:#9ca3af; }

/* ─── Gap 11 Assignee Dropdown ──────────────────────────────── */
.rfi-assignee-dropdown { position:absolute; left:0; right:0; background:#fff; border:1px solid #e5e7eb; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.12); max-height:160px; overflow-y:auto; z-index:99999; }
.rfi-assignee-dropdown input { width:100%; padding:6px 8px; border:none; border-bottom:1px solid #e5e7eb; font-size:10.5px; outline:none; box-sizing:border-box; }
.rfi-assignee-option { padding:5px 8px; font-size:10.5px; cursor:pointer; display:flex; align-items:center; gap:6px; }
.rfi-assignee-option:hover { background:#f3f4f6; }

/* ─── Gap 12 Remove Assignee Hover ──────────────────────────── */
.rfi-assignee-table tr .rfi-remove-assignee { opacity:0; transition:opacity .15s; }
.rfi-assignee-table tr:hover .rfi-remove-assignee { opacity:1; }
.rfi-remove-assignee { border:none; background:none; color:#ef4444; font-size:12px; cursor:pointer; padding:0 2px; }

/* ═══════════════════════════════════════════════════════════════
   CREATE MODE — Option D (no-modal create flow)
   ═══════════════════════════════════════════════════════════════ */
.rfi-info-panel.rfi-create-mode {
    background: #fafbfc;
}

.rfi-create-info-row {
    padding: 3px 0;
    border-bottom: 1px solid #f3f4f6;
}

.rfi-create-info-row .rfis-form-label {
    margin-bottom: 1px;
}

.rfi-create-info-row .rfis-form-input,
.rfi-create-info-row .rfis-form-select {
    margin-bottom: 4px;
    font-size: 10.5px;
    padding: 4px 6px;
}

.rfi-create-info-row .rfis-form-input:focus,
.rfi-create-info-row .rfis-form-select:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}