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

/* ============================================================================
   SUBMITTALS MODULE STYLES
   Follows rfis.css + Bootstrap color tokens (#dee2e6, #2563eb, #495057)
   ============================================================================ */

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

/* Column Menu (3-dot ⋮ dropdown) */
.submittals-container .column-menu,
.submittals-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. */
.submittals-container .advanced-filter-modal,
.advanced-filter-modal {
    z-index: 99999 !important;
    position: fixed !important;
}

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

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

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

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

/* Search highlight overlay (SearchManager) */
.submittals-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. */
.submittals-container .filter-row th {
    position: relative !important;
}

/* Funnel icon — ensure visible above filter input */
.submittals-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;
}

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

.submittals-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 */
.submittals-container .filter-row .column-filter {
    padding-right: 28px !important;
}

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

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

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

/* CRITICAL: Override SearchManager's display:none rule */
.submittals-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;
}

.submittals-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;
}

.submittals-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;
}

/* ============================================================================
   MODULE STYLES
   ============================================================================ */

/* ── Container + header ───────────────────────────────────── */

.submittals-container {
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #212529;
}

.submittals-header {
    padding: 12px 16px 0 16px;
    border-bottom: 1px solid #dee2e6;
    background: #fff;
    z-index: 20;
}

.submittals-title-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}

.submittals-title { margin: 0; font-size: 18px; color: #212529; }
.submittals-actions { display: flex; gap: 8px; }

.submittals-actions button {
    padding: 6px 12px; font-size: 12px; border-radius: 4px;
    border: 1px solid #dee2e6; background: #fff; color: #495057;
    cursor: pointer;
}
.submittals-actions button:hover { background: #f8f9fa; }
.submittals-actions .btn-primary,
.submittals-actions .submittal-create-btn {
    background: #2563eb; color: #fff; border-color: #2563eb;
}
.submittals-actions .submittal-create-btn:hover { background: #1d4ed8; }

.submittals-view-bar {
    display: flex; gap: 2px; padding: 6px 16px; background: #fff;
    border-bottom: 1px solid #e9ecef; flex-wrap: wrap;
}
.submittals-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;
}
.submittals-view-btn:hover { background: #f3f4f6; border-color: #d1d5db; color: #374151; }
.submittals-view-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.submittals-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);
}
.submittals-view-btn.active .submittals-view-count { background: rgba(255,255,255,0.25); }

.toolbar-container { width: 100%; }

/* ── Content area ─────────────────────────────────────────── */

.submittals-content {
    flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
.submittals-grid-container { flex: 1; min-height: 0; overflow: auto; background: white; }

.submittals-pagination {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 16px; border-top: 1px solid #dee2e6; background: #f8f9fa;
    font-size: 12px; color: #495057;
}
.submittals-pagination-btns button {
    padding: 4px 10px; font-size: 12px; border: 1px solid #dee2e6;
    background: #fff; border-radius: 4px; cursor: pointer;
}
.submittals-pagination-btns button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Status + workflow badges ─────────────────────────────── */

.submittals-status-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 600; white-space: nowrap;
}
.submittals-status-draft   { background: #e9ecef; color: #495057; }
.submittals-status-open    { background: #dbeafe; color: #1e40af; }
.submittals-status-closed  { background: #d1fae5; color: #065f46; }
.submittals-status-recycled{ background: #fee2e2; color: #991b1b; }

.submittals-workflow-badge {
    display: inline-block; padding: 1px 6px; border-radius: 8px;
    font-size: 10px; font-weight: 500;
}
.submittals-wf-active { background: #dbeafe; color: #1e40af; }
.submittals-wf-paused { background: #fef3c7; color: #92400e; }
.submittals-wf-completed { background: #d1fae5; color: #065f46; }
.submittals-wf-cancelled { background: #e5e7eb; color: #374151; }

.submittals-overdue { color: #b91c1c; font-weight: 600; }

/* ── Row action buttons ───────────────────────────────────── */

.submittal-row-action {
    font-size: 10px; padding: 2px 8px; border-radius: 3px;
    border: 1px solid #dee2e6; background: #fff; cursor: pointer;
    color: #495057;
}
.submittal-row-action:hover { background: #f8f9fa; color: #2563eb; }

/* ── Detail view (legacy selectors kept for modal/shared styles) ── */

.submittals-detail-wrapper { background: #fff; }

.submittals-btn-back {
    padding: 4px 10px; font-size: 12px;
    border: 1px solid #dee2e6; background: #fff; border-radius: 4px;
    cursor: pointer; color: #495057;
}
.submittals-btn-back:hover { background: #e9ecef; }

.submittals-btn-primary { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; }
.submittals-btn-primary:hover { background: #1d4ed8 !important; }
.submittals-btn-warning { background: #f59e0b !important; color: #fff !important; border-color: #f59e0b !important; }
.submittals-btn-danger { background: #ef4444 !important; color: #fff !important; border-color: #ef4444 !important; }
.submittals-btn-secondary { background: #fff; color: #495057; border: 1px solid #dee2e6; }
.submittals-btn-link { background: none; border: none; color: #2563eb; cursor: pointer; padding: 0 4px; font-size: 12px; }
.submittals-btn-link:hover { text-decoration: underline; }

.submittals-section-title {
    margin-top: 12px; margin-bottom: 6px; font-size: 11px; font-weight: 700;
    color: #495057; text-transform: uppercase; letter-spacing: 0.4px;
    border-bottom: 1px solid #e9ecef; padding-bottom: 3px;
}

/* Old .submittals-tabs-nav / .submittals-tab replaced by redesign section below */

/* ── Shared Tab Content ───────────────────────────────────── */
.submittals-empty {
    padding: 24px; text-align: center; color: #6b7280; font-size: 12px;
}
.submittals-error {
    padding: 12px; background: #fee2e2; color: #991b1b; border-radius: 4px; font-size: 12px;
}
.submittals-callout {
    padding: 10px 12px; margin-bottom: 10px; border-left: 3px solid #2563eb;
    background: #eff6ff; font-size: 12px; color: #1e40af; border-radius: 3px;
}
.submittals-callout-warning { background: #fef3c7; border-left-color: #f59e0b; color: #92400e; }

/* ── Attachment Cards ────────────────────────────────────── */
.submittals-att-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 6px; background: #fff;
}
.submittals-att-icon {
    width: 40px; height: 40px; border-radius: 6px; background: #f3f4f6;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #6b7280; flex-shrink: 0;
}
.submittals-att-info { flex: 1; min-width: 0; }
.submittals-att-name { font-size: 12px; font-weight: 500; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.submittals-att-meta { font-size: 10px; color: #9ca3af; margin-top: 2px; }
.submittals-att-actions { display: flex; gap: 6px; flex-shrink: 0; }
.submittals-att-btn {
    padding: 4px 10px; border: 1px solid #d1d5db; border-radius: 4px;
    font-size: 11px; background: #fff; color: #4b5563; cursor: pointer;
}
.submittals-att-btn:hover { border-color: #2563eb; color: #2563eb; }
.submittals-att-btn-del {
    border: none; background: none; color: #ef4444; font-size: 14px; cursor: pointer; padding: 0 4px;
}
.submittals-att-btn-del:hover { color: #dc2626; }

/* ── Cross-Trade Cards ───────────────────────────────────── */
.submittals-ct-card {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px;
    margin-bottom: 6px; background: #fff;
}
.submittals-ct-header {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.submittals-ct-number {
    font-size: 12px; font-weight: 700; color: #1f2937;
}
.submittals-ct-title { font-size: 12px; color: #374151; flex: 1; }
.submittals-ct-details {
    display: flex; gap: 16px; margin-top: 6px; font-size: 12px; color: #6b7280;
}

/* ── Revision Cards ──────────────────────────────────────── */
.submittals-rev-card {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px;
    margin-bottom: 6px; background: #fff;
    display: flex; align-items: center; justify-content: space-between;
}
.submittals-rev-current { border: 2px solid #2563eb; background: #eff6ff; }
.submittals-rev-header { display: flex; align-items: center; gap: 8px; flex: 1; }
.submittals-rev-number { font-size: 12px; font-weight: 700; color: #1f2937; }
.submittals-rev-label { font-size: 12px; color: #6b7280; }
.submittals-rev-date { font-size: 10px; color: #9ca3af; }
.submittals-rev-action { flex-shrink: 0; }
.submittals-rev-current-tag { font-size: 11px; font-weight: 600; color: #2563eb; }

/* ── Delivery Cards ──────────────────────────────────────── */
.submittals-del-card {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px;
    margin-bottom: 10px; background: #fff;
}
.submittals-del-section-label {
    font-size: 9px; font-weight: 700; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
}
.submittals-del-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 0; border-bottom: 1px solid #f3f4f6; font-size: 12px;
}
.submittals-del-label { color: #6b7280; }
.submittals-del-value { font-weight: 500; color: #374151; }
.submittals-del-form { display: flex; flex-direction: column; gap: 8px; max-width: 320px; margin-top: 4px; }
.submittals-del-form label { font-size: 12px; color: #374151; font-weight: 500; }
.submittals-del-form input {
    padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 12px; color: #1f2937;
}

.submittals-form { display: flex; flex-direction: column; gap: 6px; max-width: 320px; }
.submittals-form label { font-size: 11px; color: #495057; font-weight: 600; }
.submittals-form input,
.submittals-form textarea,
.submittals-form select {
    padding: 5px 8px; border: 1px solid #dee2e6; border-radius: 3px; font-size: 12px;
}

/* Upload */
.submittals-upload-zone {
    padding: 12px; border: 1px dashed #dee2e6; border-radius: 4px;
    margin-bottom: 12px; display: flex; align-items: center; gap: 12px;
}

/* ── Modals (common) ──────────────────────────────────────── */

.submittals-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: rgba(0,0,0,0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    overflow: auto !important;
}
.submittals-modal-dialog {
    background: #fff !important;
    border-radius: 8px !important;
    max-width: 560px;
    width: 100% !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 100000 !important;
    position: relative !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
}
.submittals-modal-dialog.create-dialog { max-width: 860px !important; }
.submittals-modal-dialog.settings-dialog { max-width: 520px !important; }
.submittals-modal-dialog.builder-dialog { max-width: 760px !important; }

.submittals-modal-header {
    padding: 12px 16px !important;
    border-bottom: 1px solid #dee2e6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.submittals-modal-header h3 { margin: 0 !important; font-size: 15px !important; color: #212529 !important; }
.submittals-modal-close {
    background: none !important;
    border: none !important;
    font-size: 22px !important;
    color: #6c757d !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 0 4px !important;
}
.submittals-modal-close:hover { color: #212529 !important; }

.submittals-modal-body {
    padding: 14px 16px !important;
    overflow-y: auto !important;
    font-size: 12px !important;
}
.submittals-modal-body label {
    display: block !important;
    margin-top: 10px !important;
    margin-bottom: 2px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #495057 !important;
}
.submittals-modal-body input[type="text"],
.submittals-modal-body input[type="date"],
.submittals-modal-body input[type="number"],
.submittals-modal-body select,
.submittals-modal-body textarea {
    width: 100% !important;
    padding: 5px 8px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
}
.submittals-modal-body textarea { resize: vertical !important; font-family: inherit !important; }
.submittals-modal-body.two-column {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 20px !important;
}
.submittals-modal-body.two-column .col { min-width: 0 !important; }

.submittals-modal-footer {
    padding: 10px 16px !important;
    border-top: 1px solid #dee2e6 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    background: #f8f9fa !important;
}
.submittals-modal-footer button {
    padding: 6px 14px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    border: 1px solid #dee2e6 !important;
    cursor: pointer !important;
}

.submittals-checkbox-row {
    display: flex !important; align-items: center; gap: 8px;
    padding: 2px 0; font-size: 12px; cursor: pointer;
    margin-top: 6px !important;
}
.submittals-checkbox-row input[type="checkbox"] { margin: 0; }

.submittals-radio-row {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px; margin-top: 4px; border: 1px solid #e9ecef; border-radius: 4px;
    cursor: pointer;
}
.submittals-radio-row:hover { background: #f8f9fa; }
.submittals-radio-row input[type="radio"] { margin-top: 2px; }

.submittals-distro-list {
    max-height: 220px; overflow-y: auto; border: 1px solid #dee2e6;
    border-radius: 3px; padding: 6px; background: #fff;
}

/* Builder items list */
.builder-items { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.builder-item {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr 60px;
    gap: 4px; padding: 4px; border-bottom: 1px solid #f0f0f0;
}
.builder-item input, .builder-item textarea {
    padding: 3px 5px; font-size: 11px; border: 1px solid #dee2e6; border-radius: 3px;
}

/* Rule #15: Module-scoped z-index overrides are at the top of this file */

/* ============================================================================
   DETAIL VIEW REDESIGN — Two-Panel Layout with Workflow Stepper
   Phases 1-7: Layout, Stepper, Hero, InfoPanel, WorkflowCards, Compose,
   HistoryTimeline, InlineEdit, Overflow
   ============================================================================ */

/* ─── Phase 1: Layout Shell ────────────────────────────────────────── */
.submittals-detail-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-bottom: 1px solid #e5e7eb;
    background: #fff; flex-shrink: 0;
}
.submittals-detail-title-text {
    margin: 0; font-size: 14px; font-weight: 700; flex: 1;
    color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.submittals-detail-actions { display: flex; gap: 6px; flex-shrink: 0; }
.submittals-detail-actions button {
    padding: 6px 14px; border-radius: 5px; font-size: 12px; font-weight: 600;
    cursor: pointer; border: 1px solid #d1d5db; background: #fff; color: #4b5563;
}
.submittals-detail-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.submittals-split-right { flex: 1; overflow-y: hidden; display: flex; flex-direction: column; min-width: 0; }

/* ─── Phase 2: Workflow Stepper ────────────────────────────────────── */
.submittals-stepper {
    display: flex; align-items: center; gap: 0; padding: 10px 16px;
    background: #f9fafb; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.submittals-step {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 600; color: #9ca3af;
}
.submittals-step.done { color: #065f46; }
.submittals-step.active { color: #2563eb; }
.submittals-step.paused { color: #92400e; }
.submittals-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;
}
.submittals-step.done .submittals-step-dot { background: #10b981; border-color: #10b981; color: #fff; }
.submittals-step.active .submittals-step-dot { background: #2563eb; border-color: #2563eb; color: #fff; }
.submittals-step.paused .submittals-step-dot { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.submittals-step.skipped { color: #9ca3af; text-decoration: line-through; }
.submittals-step.skipped .submittals-step-dot { background: #f3f4f6; border-color: #d1d5db; color: #9ca3af; }
.submittals-step-line { width: 24px; height: 2px; background: #d1d5db; margin: 0 2px; }
.submittals-step-line.done { background: #10b981; }

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

/* ─── Phase 2: Description Hero ───────────────────────────────────── */
.submittals-desc-hero {
    padding: 16px 20px; border-bottom: 1px solid #e5e7eb;
    background: #fff; flex-shrink: 0;
}
.submittals-hero-label {
    font-size: 9px; font-weight: 700; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px;
}
.submittals-hero-text { font-size: 13.5px; line-height: 1.65; color: #1f2937; }
.submittals-hero-clamped {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
}
.submittals-hero-toggle {
    background: none; border: none; color: #2563eb; font-size: 11px;
    cursor: pointer; padding: 4px 0; font-weight: 500;
}
.submittals-hero-toggle:hover { text-decoration: underline; }
.submittals-hero-refs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.submittals-ref-chip {
    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;
}

/* ─── Phase 3: Info Panel ──────────────────────────────────────────── */
.submittals-info-panel {
    width: 270px; flex-shrink: 0; padding: 12px 16px;
    border-right: 1px solid #e5e7eb; overflow-y: auto;
    font-size: 10.5px; background: #fff;
}
.submittals-info-section-label {
    font-size: 9px; font-weight: 700; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .5px; margin: 12px 0 6px;
}
.submittals-info-section-label:first-child { margin-top: 0; }
.submittals-info-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 0; border-bottom: 1px solid #f3f4f6; font-size: 10.5px;
}
.submittals-info-k { color: #6b7280; }
.submittals-info-v {
    font-weight: 500; color: #374151; max-width: 140px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}

/* Procurement timeline rows in info panel */
.submittals-tl-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; font-size: 10.5px; border-bottom: 1px dotted #f3f4f6;
}
.submittals-tl-label { color: #6b7280; }
.submittals-tl-date { color: #374151; font-weight: 500; }
.submittals-tl-row.past .submittals-tl-date { color: #065f46; }

/* ─── Phase 3: Overflow Menu ──────────────────────────────────────── */
.submittals-overflow-trigger {
    padding: 6px 12px !important; font-size: 13px !important; font-weight: 600 !important;
}
.submittals-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;
}
.submittals-overflow-item {
    padding: 6px 14px; font-size: 11px; cursor: pointer; color: #374151;
}
.submittals-overflow-item:hover { background: #f3f4f6; }
.submittals-overflow-item.danger { color: #ef4444; }

/* ─── Phase 4: Workflow Step Cards ─────────────────────────────────── */
.submittals-wf-card {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px;
    margin-bottom: 8px; border-left: 3px solid #d1d5db; background: #fff;
}
.submittals-wf-card-completed { border-left-color: #10b981; }
.submittals-wf-card-current { border-left-color: #2563eb; }
.submittals-wf-card-pending { border-left-color: #d1d5db; }
.submittals-wf-card-skipped { border-left-color: #e5e7eb; opacity: 0.7; text-decoration: line-through; }

.submittals-wf-card-header {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.submittals-wf-card-step {
    font-size: 11px; font-weight: 700; color: #6b7280;
    background: #f3f4f6; padding: 2px 6px; border-radius: 4px;
}
.submittals-wf-card-assignee { font-size: 12px; font-weight: 600; color: #1f2937; flex: 1; }
.submittals-wf-card-badge {
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
}
.submittals-wf-card-badge-completed { background: #d1fae5; color: #065f46; }
.submittals-wf-card-badge-current { background: #dbeafe; color: #1e40af; }
.submittals-wf-card-badge-pending { background: #f3f4f6; color: #6b7280; }
.submittals-wf-card-badge-skipped { background: #f3e8ff; color: #6b21a8; }
.submittals-wf-card-date { font-size: 10px; color: #6b7280; }

.submittals-wf-card-body { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f3f4f6; }
.submittals-wf-card-response {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    background: #f3f4f6; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 4px;
}
.submittals-wf-card-comment { font-size: 12px; line-height: 1.6; color: #374151; }
.submittals-wf-card-flags { margin-top: 6px; font-size: 10px; color: #9ca3af; }

/* ─── Phase 5: Compose Area ────────────────────────────────────────── */
.submittals-compose { border-top: 1px solid #e5e7eb; padding: 10px 16px; background: #f9fafb; flex-shrink: 0; }
.submittals-compose-box {
    border: 1px solid #d1d5db; border-radius: 8px; background: #fff; overflow: hidden;
}
.submittals-compose-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border-bottom: 1px solid #f3f4f6; font-size: 12px; font-weight: 600; color: #374151;
}
.submittals-compose-header select {
    padding: 3px 8px; border: 1px solid #d1d5db; border-radius: 4px;
    font-size: 12px; background: #fff;
}
.submittals-compose-textarea {
    width: 100%; min-height: 60px; padding: 8px 12px; border: none; outline: none;
    font-size: 12px; color: #1f2937; line-height: 1.5; resize: vertical;
    font-family: inherit; box-sizing: border-box;
}
.submittals-compose-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px; border-top: 1px solid #f3f4f6;
}
.submittals-compose-attach {
    font-size: 11px; color: #6b7280; background: none;
    border: 1px dashed #d1d5db; padding: 4px 10px; border-radius: 4px; cursor: pointer;
}
.submittals-compose-attach:hover { border-color: #2563eb; color: #2563eb; }
.submittals-compose-submit {
    font-size: 12px !important; padding: 6px 14px !important;
    border-radius: 5px !important; border: none !important;
}

/* ─── Phase 6: History Timeline ────────────────────────────────────── */
.submittals-tl-item {
    display: flex; gap: 8px; padding: 6px 0; position: relative;
}
.submittals-tl-item:not(:last-child)::before {
    content: ''; position: absolute; left: 9px; top: 24px; bottom: -6px;
    width: 2px; background: #e5e7eb;
}
.submittals-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;
}
.submittals-tl-dot.bl { background: #dbeafe; border: 2px solid #2563eb; }
.submittals-tl-dot.gr { background: #d1fae5; border: 2px solid #10b981; }
.submittals-tl-dot.gy { background: #f3f4f6; border: 2px solid #d1d5db; }
.submittals-tl-dot.am { background: #fef3c7; border: 2px solid #f59e0b; }
.submittals-tl-dot.rd { background: #fee2e2; border: 2px solid #ef4444; }
.submittals-tl-body { flex: 1; }
.submittals-tl-title { font-size: 12px; font-weight: 500; color: #374151; }
.submittals-tl-sub { font-size: 10px; color: #9ca3af; }

/* ─── Phase 6: Tab Badges ──────────────────────────────────────────── */
.submittals-detail-tabs-nav {
    display: flex; border-bottom: 1px solid #e5e7eb; background: #fff;
    flex-shrink: 0; padding: 0 16px;
}
.submittals-tab-btn {
    padding: 8px 14px; border: none; background: none; cursor: pointer;
    font-size: 12px; border-bottom: 2px solid transparent; color: #6b7280;
}
.submittals-tab-btn.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
.submittals-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; border-radius: 8px; font-size: 9px;
    font-weight: 700; padding: 0 4px; background: #d1fae5; color: #065f46; margin-left: 4px;
}
.submittals-tab-content { flex: 1; overflow-y: auto; padding: 12px 16px; }

/* ─── Phase 7: Inline Edit ─────────────────────────────────────────── */
.submittals-info-editable {
    cursor: pointer; border-bottom: 1px dashed transparent; transition: all .15s; position: relative;
}
.submittals-info-editable:hover { border-color: #2563eb; color: #2563eb; }
.submittals-info-editable:hover::after { content: '\270E'; font-size: 9px; color: #2563eb; margin-left: 3px; }
.submittals-inline-input {
    width: 100%; padding: 2px 4px; border: 1px solid #2563eb;
    border-radius: 3px; font-size: 10.5px; outline: none;
}
/* ─── Overdue Badge ────────────────────────────────────────────── */
.submittals-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: submittals-pulse 2s infinite;
}
@keyframes submittals-pulse { 0%,100%{opacity:1;} 50%{opacity:.6;} }

/* ─── Assignee Tracking Table ──────────────────────────────────── */
.submittals-asgn-table {
    width: 100%; border-collapse: collapse; font-size: 10px; margin: 4px 0;
}
.submittals-asgn-table th {
    text-align: left; padding: 4px 6px; color: #6b7280; font-weight: 600;
    border-bottom: 1px solid #e5e7eb; background: #f9fafb; font-size: 9px;
}
.submittals-asgn-table td { padding: 5px 6px; border-bottom: 1px solid #f3f4f6; }
.submittals-asgn-yes { color: #10b981; font-weight: 700; font-size: 10px; }
.submittals-asgn-pending { color: #2563eb; font-weight: 500; font-size: 10px; }
.submittals-asgn-no { color: #9ca3af; font-size: 10px; }

.submittals-info-loading { color: #9ca3af; padding: 20px; text-align: center; font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════════ */
/*  CREATE MODE — Inline create panel (Option D)                      */
/* ═══════════════════════════════════════════════════════════════════ */

.submittals-create-header {
    border-bottom-color: #bfdbfe; background: #f0f7ff;
}
.submittals-create-title {
    margin: 0; font-size: 14px; font-weight: 700; flex: 1;
    color: #6b7280; font-style: italic;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.submittals-create-action {
    padding: 6px 14px; border-radius: 5px; font-size: 12px; font-weight: 600;
    cursor: pointer; border: none;
}

/* Info panel in create mode */
.submittals-info-panel.submittals-create-mode {
    background: #fafbfc;
    scrollbar-gutter: stable;
}
.submittals-create-info-row {
    padding: 3px 0; border-bottom: 1px solid #f3f4f6;
}
.submittals-create-label {
    display: block; font-size: 9px; font-weight: 700; text-transform: uppercase;
    color: #9ca3af; letter-spacing: 0.5px; margin-bottom: 2px;
}
.submittals-create-select,
.submittals-create-input-sm {
    width: 100%; padding: 4px 6px; border: 1px solid #e5e7eb;
    border-radius: 4px; font-size: 10.5px; color: #1f2937;
    background: #fff; box-sizing: border-box; outline: none;
    font-family: inherit;
}
.submittals-create-select:focus,
.submittals-create-input-sm:focus {
    border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.submittals-create-checkbox {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; color: #374151; cursor: pointer;
}

/* Hero area in create mode */
.submittals-create-hero { background: #fafbfc; }
.submittals-hero-label-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px; margin-top: 8px;
}
.submittals-create-input {
    width: 100%; padding: 8px 10px; border: 1px solid #bfdbfe;
    border-radius: 4px; font-size: 14px; font-weight: 600;
    color: #1f2937; box-sizing: border-box; outline: none;
    font-family: inherit; margin-bottom: 6px;
}
.submittals-create-input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }
.submittals-create-textarea {
    width: 100%; padding: 8px 10px; border: 1px solid #bfdbfe;
    border-radius: 4px; font-size: 13px; line-height: 1.6;
    color: #1f2937; box-sizing: border-box; outline: none;
    font-family: inherit; resize: vertical;
}
.submittals-create-textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }

/* AI Enhance button */
.submittals-enhance-btn {
    padding: 3px 10px; border: 1px solid #c4b5fd; border-radius: 4px;
    background: #f5f3ff; color: #7c3aed; font-size: 10px; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; gap: 4px;
}
.submittals-enhance-btn:hover { background: #ede9fe; border-color: #a78bfa; }

/* Dropzone */
.submittals-create-dropzone {
    border: 2px dashed #d1d5db; border-radius: 8px; padding: 16px;
    text-align: center; margin-bottom: 12px; background: #fff; cursor: pointer;
}
.submittals-create-dropzone:hover { border-color: #2563eb; background: #f0f7ff; }

/* ── Create: Workflow section ─────────────────────────────────────── */
.submittals-wf-section-label { color: #0d9488; border-bottom-color: #ccfbf1; }
.submittals-wf-template-select { border-color: #0d9488; font-weight: 600; }
.submittals-wf-steps-container { margin-top: 4px; }
.submittals-wf-step-row {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 0; border-bottom: 1px solid #f3f4f6;
}
.submittals-wf-step-num {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 700;
    background: #f3f4f6; border: 2px solid #d1d5db; color: #6b7280;
}
.submittals-wf-step-row:first-child .submittals-wf-step-num {
    background: #dbeafe; border-color: #2563eb; color: #2563eb;
}
.submittals-wf-step-info { flex: 1; min-width: 0; }
.submittals-wf-step-name {
    font-size: 9px; font-weight: 600; color: #374151;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.submittals-wf-step-row select { min-width: 110px; max-width: 120px; font-size: 9.5px; padding: 2px 4px; }
.submittals-wf-hint { font-size: 8.5px; color: #9ca3af; margin-top: 4px; padding: 2px 0; }
.submittals-wf-template-badge {
    font-size: 9px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
    background: #ccfbf1; color: #115e59;
}
.submittals-create-distro { max-height: 120px; overflow-y: auto; }

/* Template row + edit icon */
.submittals-wf-tmpl-row { margin-bottom: 4px; }
.submittals-wf-edit-btn {
    flex-shrink: 0; width: 24px; height: 24px; border: 1px solid #e5e7eb;
    border-radius: 4px; background: #fff; color: #6b7280; font-size: 13px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    padding: 0; line-height: 1;
}
.submittals-wf-edit-btn:hover { background: #f3f4f6; color: #374151; border-color: #d1d5db; }

/* Custom actions row */
.submittals-wf-actions {
    display: flex; gap: 4px; margin-top: 3px;
}
.submittals-wf-save-tmpl {
    font-size: 10px; font-weight: 600; color: #6366f1; background: none;
    border: 1px dashed #a5b4fc; border-radius: 3px; padding: 3px 8px;
    cursor: pointer; flex: 1;
}
.submittals-wf-save-tmpl:hover { background: #eef2ff; border-color: #6366f1; }
.submittals-wf-save-edit {
    font-size: 10px; font-weight: 600; color: #0d9488; background: none;
    border: 1px solid #5eead4; border-radius: 3px; padding: 3px 8px;
    cursor: pointer; flex: 1;
}
.submittals-wf-save-edit:hover { background: #ccfbf1; border-color: #0d9488; }
.submittals-wf-del-tmpl {
    font-size: 10px; font-weight: 600; color: #ef4444; background: none;
    border: 1px solid #fca5a5; border-radius: 3px; padding: 3px 8px;
    cursor: pointer;
}
.submittals-wf-del-tmpl:hover { background: #fef2f2; border-color: #ef4444; }
.submittals-wf-actions .submittals-wf-add-step { flex: 1; }

/* Custom workflow step builder */
.submittals-wf-custom-row {
    cursor: grab; background: #fff; border: 1px solid #e5e7eb; border-radius: 3px;
    margin-bottom: 3px; padding: 4px 5px;
}
.submittals-wf-custom-row:active { cursor: grabbing; }
.submittals-wf-custom-row.drag-over { border-top: 2px solid #2563eb; }
.submittals-wf-custom-top {
    display: flex; align-items: center; gap: 4px;
}
.submittals-wf-drag-handle {
    flex-shrink: 0; color: #c4c4c4; font-size: 11px; cursor: grab;
    width: 14px; text-align: center; user-select: none;
}
.submittals-wf-custom-top .sc-cw-name {
    flex: 1; min-width: 0; padding: 2px 5px; font-size: 11px;
    border: 1px solid #e5e7eb; border-radius: 3px; outline: none;
    font-family: inherit; color: #1f2937; background: #fff; box-sizing: border-box;
}
.submittals-wf-custom-top .sc-cw-name:focus { border-color: #2563eb; }
.submittals-wf-custom-bot {
    display: flex; align-items: center; gap: 4px;
    margin-top: 2px; padding-left: 18px;
}
.submittals-wf-custom-bot select {
    flex: 1; min-width: 0; padding: 1px 3px; font-size: 10px;
    border: 1px solid #e5e7eb; border-radius: 3px; color: #374151;
    background: #fff; box-sizing: border-box; outline: none; font-family: inherit;
}
.submittals-wf-custom-bot select:focus { border-color: #2563eb; }
.submittals-wf-add-step {
    font-size: 10px; font-weight: 600; color: #0d9488; background: none;
    border: 1px dashed #5eead4; border-radius: 3px; padding: 3px 8px;
    cursor: pointer; width: 100%; margin-top: 3px;
}
.submittals-wf-add-step:hover { background: #ccfbf1; border-color: #0d9488; }
.submittals-wf-remove-step {
    background: none; border: none; color: #d1d5db; font-size: 13px;
    cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0;
}
.submittals-wf-remove-step:hover { color: #ef4444; }
.submittals-wf-req-label {
    display: flex; align-items: center; gap: 2px;
    font-size: 8px; color: #6b7280; flex-shrink: 0; white-space: nowrap;
}
.submittals-btn-success {
    background: #10b981 !important; color: #fff !important;
    border: none !important;
}
.submittals-btn-success:hover { background: #059669 !important; }