/* drafts.css - Enhanced drafts page */

/* Page padding — match Claims and Deceased. Box-sizing + max-width prevent
   horizontal overflow when the sidebar is expanded and content would otherwise
   extend past the right edge of the viewport. */
#page-drafts .dashboard-content {
    padding: 0 1.25rem 1rem;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
}

/* ==================== ENHANCED DRAFTS PAGE ==================== */
.drafts-kpis-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
    .drafts-kpis-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .drafts-kpis-grid { grid-template-columns: 1fr; }
}

.draft-kpi-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease;
}

.draft-kpi-card:hover { transform: translateY(-2px); }
.draft-kpi-card.warning { border-left: 4px solid #f59e0b; }
.draft-kpi-card.danger { border-left: 4px solid #dc2626; }

.draft-kpi-icon {
    width: 50px;
    height: 50px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.draft-kpi-icon.total { background: #e0e7ff; color: #4f46e5; }
.draft-kpi-icon.expiring { background: #fef3c7; color: #f59e0b; }
.draft-kpi-icon.expired { background: #fee2e2; color: #dc2626; }
.draft-kpi-icon.progress-kpi { background: #F4F0E9; color: #1E6332; }

.draft-kpi-content { display: flex; flex-direction: column; }
.draft-kpi-value { font-size: 1.5rem; font-weight: 700; color: #1f2937; }
.draft-kpi-label { font-size: 0.85rem; color: #6b7280; }
.draft-kpi-sub { font-size: 0.75rem; color: #9ca3af; }

/* Tooltip on "X days left" badge — overflow:visible on hover so tooltip escapes card */
.draft-card:hover {
    overflow: visible;
}
.draft-expires-tip {
    position: relative;
    cursor: default;
}
.draft-expires-tip::after {
    content: 'Drafts expire after 14 days. Complete, archive, or delete to stay organized.';
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    background: #1f2937;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 0.45rem 0.7rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.draft-expires-tip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Drafts Tabs */
.drafts-tabs {
    display: flex;
    gap: 0.5rem;
    background: #f1f5f9;
    padding: 0.375rem;
    border-radius: 0.75rem;
}

.drafts-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: none;
    background: transparent;
    color: #64748b;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.drafts-tab:hover {
    background: rgba(255,255,255,0.5);
    color: #475569;
}

.drafts-tab.active {
    background: #fff;
    color: #1E6332;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.drafts-tab .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    background: #1E6332;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.75rem;
}

.drafts-tab .tab-badge.secondary {
    background: #94a3b8;
}

.drafts-tab.active .tab-badge.secondary {
    background: #64748b;
}

/* Archived draft card styling */
.draft-card.archived {
    opacity: 0.75;
    background: #fff;
    border-top: 4px solid #94a3b8;
    border-left: 4px solid #94a3b8;
}

.draft-card.archived .draft-expires {
    background: #94a3b8;
}

.draft-archived-badge {
    background: #64748b;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 600;
    padding: 0.15rem 0.35rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    align-self: flex-end;
}

/* Ready to Submit badge (card view) */
.draft-ready-badge {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 0.35rem;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(30, 99, 50, 0.3);
    align-self: flex-end;
}
.draft-ready-badge i {
    font-size: 0.6rem;
}

/* Ready badge (list view - compact) */
.draft-ready-badge-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #d1fae5;
    color: #065f46;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 0.35rem;
}
.draft-ready-badge-sm i {
    font-size: 0.6rem;
    color: #1E6332;
}

/* Ready card subtle green glow */
.draft-card.draft-ready {
    border-color: #86efac;
    box-shadow: 0 2px 12px rgba(30, 99, 50, 0.12);
}

/* Family Pay badge (card view) */
.draft-fp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.18rem 0.45rem;
    border-radius: 0.35rem;
    box-shadow: 0 2px 6px rgba(30, 99, 50, 0.25);
}
.draft-fp-badge i { font-size: 0.55rem; }

/* Financial summary row (card view) */
.draft-financials-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.draft-fin-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #374151;
}
.draft-fin-item i {
    font-size: 0.65rem;
    color: #2F8542;
}
.draft-fin-item strong {
    color: #166534;
}

.drafts-filter-bar {
    background: #fff;
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label {
    font-size: 0.85rem;
    color: #6b7280;
    white-space: nowrap;
}

.filter-actions { margin-left: auto; }

/* View Toggle Buttons */
.view-toggle-group {
    display: flex;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.view-toggle-btn {
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    color: #6b7280;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.view-toggle-btn:hover {
    color: #1E6332;
    background: rgba(30, 99, 50, 0.1);
}

.view-toggle-btn.active {
    background: #fff;
    color: #1E6332;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Drafts-specific view toggle — green active state (matches Deceased tab) */
.drafts-view-toggle-btn {
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    color: #6b7280;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.drafts-view-toggle-btn:hover {
    color: #1E6332;
    background: rgba(30, 99, 50, 0.1);
}

.drafts-view-toggle-btn.active {
    background: linear-gradient(135deg, #1E6332 0%, #214A3E 100%);
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(30, 99, 50, 0.35);
}

/* ==================== DRAFTS SORT PANEL ==================== */
.draft-sort-control {
    position: relative;
    flex-shrink: 0;
}

.draft-sort-trigger-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.draft-sort-trigger-btn:hover {
    border-color: #1E6332;
    color: #1E6332;
    box-shadow: 0 2px 6px rgba(30, 99, 50, 0.12);
}

.draft-sort-trigger-btn.active {
    border-color: #1E6332;
    color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.1);
}

.draft-sort-chevron {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
}

.draft-sort-trigger-btn.active .draft-sort-chevron {
    transform: rotate(180deg);
}

.draft-sort-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
    z-index: 1000;
    display: none;
    animation: sortPanelIn 0.2s ease-out;
    overflow: hidden;
}

.draft-sort-panel.open {
    display: block;
}

.draft-sort-panel-header {
    background: linear-gradient(135deg, #1E6332 0%, #214A3E 100%);
    color: #fff;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.85rem;
}

.draft-sort-panel-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    transition: background 0.2s;
}

.draft-sort-panel-close:hover {
    background: rgba(255,255,255,0.25);
}

.draft-sort-panel-body {
    padding: 0.75rem;
}

.draft-sort-preset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.draft-sort-preset-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 0.4rem;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 500;
    color: #4b5563;
    transition: all 0.15s ease;
    text-align: center;
}

.draft-sort-preset-btn i {
    font-size: 1rem;
    color: #9ca3af;
    transition: color 0.15s;
}

.draft-sort-preset-btn:hover {
    background: #F4F0E9;
    border-color: #86efac;
    color: #1E6332;
}

.draft-sort-preset-btn:hover i {
    color: #18A74B;
}

.draft-sort-preset-btn.active {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: #1E6332;
    color: #065f46;
}

.draft-sort-preset-btn.active i {
    color: #1E6332;
}

/* ==================== POLICY COUNT BADGE ==================== */
.draft-policy-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 2px 8px;
    background: #F4F0E9;
    color: #1E6332;
    border: 1px solid #c3e6cb;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.draft-policy-count-badge i {
    font-size: 0.65rem;
}

/* ==================== DRAFTS TABLE TOOLBAR ==================== */
.drafts-table-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
    border-bottom: 1px solid #e9ecef;
}

.draft-expand-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    color: #4b5563;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.draft-expand-all-btn:hover {
    border-color: #1E6332;
    color: #1E6332;
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.12);
}

.draft-expand-all-btn i {
    font-size: 0.75rem;
}

/* ==================== DRAFTS TABLE ROW EXPAND/COLLAPSE ==================== */
.drafts-list-table tbody tr.draft-main-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.drafts-list-table tbody tr.draft-main-row td {
    transition: background 0.15s ease;
}

.drafts-list-table tbody tr.draft-main-row:hover td {
    background: #F4F0E9;
}

.drafts-list-table tbody tr.draft-main-row.row-expanded td {
    background: #F4F0E9;
    border-bottom-color: transparent;
}

/* Chevron column */
.draft-chevron-cell {
    text-align: center;
    padding: 0 0.5rem !important;
    width: 44px;
}

.draft-row-chevron {
    color: #9ca3af;
    font-size: 0.78rem;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
    display: inline-block;
}

.draft-row-chevron.open {
    transform: rotate(90deg);
    color: #1E6332;
}

/* Sticky actions column */
.drafts-tbl-actions-col {
    position: sticky;
    right: 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
    box-shadow: -2px 0 6px rgba(0,0,0,0.06);
}

.drafts-list-table td:last-child {
    position: sticky;
    right: 0;
    background: #fff;
    box-shadow: -2px 0 6px rgba(0,0,0,0.06);
}

.drafts-list-table tr:hover td:last-child {
    background: #F4F0E9;
}

.drafts-list-table tr.row-expanded td:last-child {
    background: #F4F0E9;
}

/* Expand row */
.draft-expand-row td {
    padding: 0 !important;
    border-bottom: none !important;
}

/* Separator between draft record groups */
.draft-group-sep td {
    height: 8px;
    padding: 0 !important;
    background: linear-gradient(to right, #F4F0E9, #E8DFD0, #F4F0E9);
    border-top: 1px solid #F4F0E9 !important;
    border-bottom: 1px solid #F4F0E9 !important;
    border-left: none !important;
    border-right: none !important;
}

.draft-expand-inner {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.draft-expand-inner.open {
    max-height: 900px;
}

.draft-expand-content {
    padding: 1rem 1.25rem 1rem 3.75rem;
    background: linear-gradient(to right, #F4F0E9 0%, #f8fffe 100%);
    border-top: 1px solid #c6e8d5;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.draft-expand-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #1E6332;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Policy rows in expand */
.draft-expand-policies-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.draft-expand-policy-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    font-size: 0.82rem;
    flex-wrap: wrap;
}

.draft-expand-policy-num {
    color: #6b7280;
    font-size: 0.77rem;
    font-family: monospace;
}

.draft-expand-policy-amounts {
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
    font-size: 0.8rem;
    flex-wrap: wrap;
}

.draft-expand-policy-face strong { color: #1E6332; }
.draft-expand-policy-req strong  { color: #0369a1; }

.draft-expand-benes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    width: 100%;
}

/* Meta row in expand */
.draft-expand-meta {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: #6b7280;
    padding-top: 0.25rem;
    border-top: 1px dashed #d1fae5;
}

.draft-expand-meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.draft-expand-meta-item i { color: #9ca3af; font-size: 0.72rem; }
.draft-expand-meta-item strong { color: #374151; margin-left: 0.15rem; }

/* Empty expand state */
.draft-expand-empty-msg {
    color: #9ca3af;
    font-size: 0.82rem;
    font-style: italic;
    padding: 0.25rem 0;
}

/* ==================== DRAFTS LIST VIEW ==================== */
.drafts-list-container {
    background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
}

.drafts-table-header {
    padding: 0.55rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #F4F0E9 0%, #F4F0E9 100%);
}

.drafts-table-header h5 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #166534;
    line-height: 1.3;
}

.drafts-table-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drafts-table-info {
    font-size: 0.78rem;
    color: #1E6332;
    font-weight: 600;
    background: rgba(30,99,50,0.08);
    padding: 3px 10px;
    border-radius: 20px;
}

.drafts-list-wrap {
    overflow-x: auto;
}

.drafts-list-table {
    width: 100%;
    /* Width is driven by _applyDraftsColumnWidths() (JS): the table fills the
       available width (so the sticky Actions column sits flush right) and only
       scrolls when the columns genuinely don't fit. No forced 1400px min-width
       — that used to leave the table narrower than the wrap, detaching the
       Actions column to the far right with an empty gap before it. */
    min-width: 0;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.drafts-list-table thead {
    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
    border-bottom: 2px solid #e9ecef;
}

.drafts-list-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    white-space: nowrap;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.drafts-list-table td {
    padding: 1rem;
    border-bottom: 1px solid #f1f3f4;
    vertical-align: middle;
}

.drafts-list-table tbody tr {
    transition: background 0.15s ease;
}

.drafts-list-table tbody tr:hover {
    background: #f9fafb;
}

.draft-list-name {
    font-weight: 600;
    color: #1f2937;
}

.draft-list-funeral {
    color: #6b7280;
    font-size: 0.85rem;
}

.draft-list-policies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.draft-list-policy-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: #F4F0E9;
    border: 1px solid #E8DFD0;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #166534;
}
.draft-list-policy-chip .ic-badge {
    gap: 4px;
}
.draft-list-policy-chip .ic-logo {
    height: 18px;
    max-width: 32px;
}
.draft-list-policy-chip .ic-logo-fallback {
    font-size: 12px;
    width: 14px;
}

.draft-list-amount {
    font-weight: 600;
    color: #1E6332;
}

.draft-list-beneficiaries {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.draft-list-beneficiary-chip {
    padding: 0.15rem 0.4rem;
    background: #e0e7ff;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #3730a3;
}

.draft-list-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.draft-list-progress-bar {
    width: 60px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.draft-list-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1E6332, #18A74B);
    border-radius: 3px;
}

.draft-list-progress-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1E6332;
}

.draft-list-expires {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.draft-list-expires-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.draft-list-expires-badge.expired {
    background: #fee2e2;
    color: #dc2626;
}

.draft-list-expires-badge.today {
    background: #fef3c7;
    color: #d97706;
}

.draft-list-expires-badge.soon {
    background: #fff7ed;
    color: #ea580c;
}

.draft-list-expires-badge.ok {
    background: #F4F0E9;
    color: #2F8542;
}

.draft-list-actions {
    display: flex;
    gap: 0.4rem;
    /* Right-align the action buttons inside the Actions cell so they line up
       flush at the right edge. (The "ACTIONS" th header stays centered.) */
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
}

.draft-list-action-btn {
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    /* Never allow the label "Review & Submit" / "Continue" to wrap into
       multiple lines inside the narrow Actions column. Text stays on one
       line; column widens or shrinks to accommodate. */
    white-space: nowrap;
    line-height: 1.2;
    flex-shrink: 0;
}

.draft-list-action-btn.continue {
    background: #1E6332;
    color: #fff;
}

.draft-list-action-btn.continue:hover {
    background: #214A3E;
}

.draft-list-action-btn.ready {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-weight: 600;
}
.draft-list-action-btn.ready:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
}

.draft-list-action-btn.archive {
    background: #f3f4f6;
    color: #6b7280;
}

.draft-list-action-btn.archive:hover {
    background: #e5e7eb;
}

.draft-list-action-btn.delete {
    background: #fef2f2;
    color: #dc2626;
}

.draft-list-action-btn.delete:hover {
    background: #fee2e2;
}

/* Auto-fill grid — lets the browser fit as many 320px+ columns as the
   available width allows, rather than locking in a fixed 4 and squeezing
   everything when the sidebar is expanded. Prevents card overflow. */
.drafts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    /* The viewport-lock makes this grid itself the flex+scroll item; a
       grid that's a shrinkable flex item collapses its auto rows. Pin
       every row to content height and pack from the top so cards keep
       their full height and the grid scrolls instead (Archived tab). */
    align-content: start;
    grid-auto-rows: max-content;
}
@media (max-width: 768px) { .drafts-grid { grid-template-columns: 1fr; } }

.draft-card {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 14px rgba(0,0,0,0.05);
    /* visible (not hidden) — matches Claims. The old hidden→visible hover
       toggle (for the tooltip) repainted the rounded asymmetric borders
       and made the colored edge seam/break on hover. */
    overflow: visible;
    transition: all 0.2s ease;
    border: 1px solid #e2e5e9;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.draft-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(30, 99, 50,0.12), 0 4px 12px rgba(0,0,0,0.08);
}

/* Status accent — top + left are real borders on the SAME box, so they
   always meet cleanly at the rounded corner (matches Claims tiles). */
.draft-card.urgent {
    background: #fff;
    border-top: 4px solid #dc2626;
    border-left: 4px solid #dc2626;
}

.draft-card.warning {
    background: #fff;
    border-top: 4px solid #ea580c;
    border-left: 4px solid #ea580c;
}

.draft-card.healthy {
    background: #fff;
    border-top: 4px solid #18A74B;
    border-left: 4px solid #18A74B;
}

/* Urgency Toggle Legend/Filters (inline in filter bar) */
.draft-urgency-toggles {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.drafts-filter-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    flex-wrap: wrap;
    /* Never overflow the filter bar — wrap controls to next row if narrow */
    max-width: 100%;
}

/* Created By Me Toggle */
.created-by-me-divider {
    width: 1px;
    height: 20px;
    background: #d1d5db;
    flex-shrink: 0;
}

.created-by-me-toggle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    margin: 0;
    padding: 0.25rem 0.5rem;
    border-radius: 16px;
    transition: background 0.2s ease;
}

.created-by-me-toggle:hover {
    background: #f3f4f6;
}

.created-by-me-toggle input[type="checkbox"] {
    display: none;
}

.created-by-me-slider {
    position: relative;
    width: 32px;
    height: 18px;
    background: #d1d5db;
    border-radius: 9px;
    transition: background 0.25s ease;
    flex-shrink: 0;
}

.created-by-me-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.created-by-me-toggle input:checked + .created-by-me-slider {
    background: #1E6332;
}

.created-by-me-toggle input:checked + .created-by-me-slider::after {
    transform: translateX(14px);
}

.created-by-me-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    transition: color 0.2s ease;
}

.created-by-me-toggle input:checked ~ .created-by-me-text {
    color: #1E6332;
    font-weight: 600;
}

.draft-urgency-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.775rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    background: #f1f5f9;
    color: #94a3b8;
    opacity: 0.5;
}

.draft-urgency-chip .urgency-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.draft-urgency-chip .urgency-count {
    background: rgba(0,0,0,0.08);
    padding: 0.05rem 0.4rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    min-width: 1.25rem;
    text-align: center;
}

/* Healthy (green) */
.draft-urgency-chip.healthy .urgency-dot { background: #18A74B; }
.draft-urgency-chip.healthy.active {
    background: #F4F0E9;
    color: #1E6332;
    border-color: #18A74B;
    opacity: 1;
}
.draft-urgency-chip.healthy.active .urgency-count { background: rgba(47, 133, 66,0.15); color: #1E6332; }

/* Warning (orange) */
.draft-urgency-chip.warning .urgency-dot { background: #ea580c; }
.draft-urgency-chip.warning.active {
    background: #fff7ed;
    color: #c2410c;
    border-color: #ea580c;
    opacity: 1;
}
.draft-urgency-chip.warning.active .urgency-count { background: rgba(234,88,12,0.15); color: #c2410c; }

/* Urgent (red) */
.draft-urgency-chip.urgent .urgency-dot { background: #dc2626; }
.draft-urgency-chip.urgent.active {
    background: #fef2f2;
    color: #dc2626;
    border-color: #dc2626;
    opacity: 1;
}
.draft-urgency-chip.urgent.active .urgency-count { background: rgba(220,38,38,0.15); color: #dc2626; }

/* Expired (gray) */
.draft-urgency-chip.expired .urgency-dot { background: #6b7280; }
.draft-urgency-chip.expired.active {
    background: #f3f4f6;
    color: #4b5563;
    border-color: #6b7280;
    opacity: 1;
}
.draft-urgency-chip.expired.active .urgency-count { background: rgba(107,114,128,0.15); color: #4b5563; }

.draft-urgency-chip:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}
.draft-urgency-chip.active:hover {
    opacity: 1;
    transform: translateY(-1px);
}

/* Expiration badge warning/orange color */
.draft-expires.text-warning {
    background: linear-gradient(135deg, #ffedd5, #fed7aa) !important;
    color: #c2410c !important;
    font-weight: 700;
}

/* List view urgency badge */
.draft-list-expires-badge.urgent {
    background: #fee2e2;
    color: #dc2626;
}

.draft-card-header {
    padding: 0.75rem 1rem 0.5rem;
}

.draft-card-topmeta {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    z-index: 1;
}

.draft-header-date {
    font-size: 0.7rem;
    color: #9ca3af;
    line-height: 1.4;
}

.draft-header-author {
    color: #6b7280;
    font-weight: 600;
}

.draft-header-author i {
    font-size: 0.6rem;
    margin-right: 2px;
}

.draft-expires {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.65rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #6b7280;
}

.draft-expires.text-danger {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #dc2626;
    animation: pulse-danger 2s infinite;
}

@keyframes pulse-danger {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

.draft-expiry-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.draft-expiry-badge.danger { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #dc2626; }
.draft-expiry-badge.warning { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706; }
.draft-expiry-badge.info { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #4f46e5; }
.draft-expiry-badge.success { background: linear-gradient(135deg, #F4F0E9, #E8DFD0); color: #166534; }

.draft-card-body {
    padding: 0.375rem 1rem 0.75rem;
    flex: 1;
}

.draft-deceased {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.draft-funeral {
    font-size: 0.8rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.draft-funeral i { color: #9ca3af; font-size: 0.7rem; }

.draft-progress-section { margin-bottom: 0.5rem; }

.draft-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.draft-progress-bar {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.draft-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1E6332, #2F8542);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Progress section used in JS rendering */
.draft-progress {
    padding: 0.75rem 1rem;
    border-top: 1px solid #f3f4f6;
    background: linear-gradient(135deg, #fafbfc 0%, #f5f7f9 100%);
}

/* Step Indicators */
.step-indicators {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    z-index: 1;
}

.step-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid #e5e7eb;
    background: #fff;
    color: #9ca3af;
}

.step-dot i {
    font-size: 0.55rem;
}

.step-indicator.completed .step-dot {
    background: linear-gradient(135deg, #18A74B, #2F8542);
    border-color: #18A74B;
    color: #fff;
    box-shadow: 0 2px 4px rgba(47, 133, 66, 0.3);
}

.step-indicator.current .step-dot {
    background: #fff;
    border-color: #18A74B;
    border-width: 2px;
    color: #18A74B;
    box-shadow: 0 0 0 3px rgba(47, 133, 66, 0.15);
    animation: pulse-step 2s infinite;
}

@keyframes pulse-step {
    0%, 100% { box-shadow: 0 0 0 3px rgba(47, 133, 66, 0.15); }
    50% { box-shadow: 0 0 0 5px rgba(47, 133, 66, 0.1); }
}

.step-indicator.pending .step-dot {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #d1d5db;
}

.step-label {
    font-size: 0.55rem;
    font-weight: 500;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.step-indicator.completed .step-label {
    color: #18A74B;
}

.step-indicator.current .step-label {
    color: #18A74B;
    font-weight: 600;
}

.step-connector {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    margin: 0 0.15rem;
    margin-bottom: 1rem;
    border-radius: 1px;
    transition: background 0.3s ease;
}

.step-connector.completed {
    background: linear-gradient(90deg, #18A74B, #18A74B);
}

/* Archived state */
.step-indicators.archived .step-indicator.completed .step-dot {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    border-color: #9ca3af;
    box-shadow: none;
}

.step-indicators.archived .step-indicator.completed .step-label {
    color: #9ca3af;
}

.step-indicators.archived .step-connector.completed {
    background: #9ca3af;
}

.step-indicators.archived .step-indicator.current .step-dot {
    border-color: #9ca3af;
    color: #9ca3af;
    box-shadow: none;
    animation: none;
}

.step-indicators.archived .step-indicator.current .step-label {
    color: #9ca3af;
}

.draft-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.65rem;
    color: #9ca3af;
}

.draft-meta i { margin-right: 0.25rem; }

.draft-card-footer {
    padding: 0.625rem 1rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    gap: 0.375rem;
    align-items: center;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.draft-card-footer .btn {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
}

.draft-card-footer .draft-actions {
    display: flex;
    gap: 0.375rem;
    margin-left: auto;
}

.draft-card-footer .btn-outline-danger,
.draft-card-footer .btn-outline-secondary {
    padding: 0.25rem 0.5rem;
}

.draft-policies-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
    min-width: 0;
    max-width: 100%;
}

.draft-policy-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.75rem;
    color: #334155;
    /* Allow chips to shrink/wrap inside the card instead of overflowing the
       right edge when the IC name is long (e.g. "Life Insurance Company of
       Alabama $10,000"). The long IC name truncates with ellipsis; the
       amount stays visible on the right. */
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}
.draft-policy-chip > span:not(.ic-badge):not(:last-child) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.draft-policy-chip strong {
    color: #1E6332;
    font-weight: 700;
}
.draft-policy-chip .ic-badge {
    gap: 4px;
}
.draft-policy-chip .ic-logo {
    height: 20px;
    max-width: 36px;
}
.draft-policy-chip .ic-logo-fallback {
    font-size: 13px;
    width: 16px;
}

.draft-chip-bene {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #d1fae5;
    color: #065f46;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 5px;
    font-size: 0.65rem;
    font-weight: 600;
    cursor: default;
}
.draft-chip-bene i {
    font-size: 0.68rem;
}

/* Beneficiary hover tooltip */
.bene-tooltip {
    position: fixed;
    z-index: 99999;
    background: #ffffff;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.75rem;
    line-height: 1.5;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    max-width: 260px;
    white-space: normal;
}
.bene-tooltip-title {
    font-weight: 700;
    font-size: 0.7rem;
    color: #1E6332;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.bene-tooltip-item {
    padding: 2px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.72rem;
}
.bene-tooltip-item:last-child {
    border-bottom: none;
}

/* Compact Document Widget Styles */
.dashboard-top-row {
    position: relative;
    margin-bottom: 1.5rem;
}

.quick-actions-inline {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-right: 340px; /* Space for doc widget */
}

.qa-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 2rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.qa-chip:hover {
    background: #1E6332;
    color: #fff;
    border-color: #1E6332;
    transform: translateY(-1px);
}

.qa-chip i { font-size: 0.9rem; }
.qa-badge {
    background: #dc2626;
    color: #fff;
    padding: 0.1rem 0.4rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.doc-widget {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #fde68a;
    overflow: hidden;
    z-index: 10;
}

.doc-widget-header {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.doc-widget-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.doc-widget-count {
    background: #fff;
    color: #d97706;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.doc-widget-list {
    max-height: 180px;
    overflow-y: auto;
}

.doc-widget-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.15s;
}

.doc-widget-row:hover { background: #fffbeb; }
.doc-widget-row:last-child { border-bottom: none; }

.dw-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dw-dot.urgent { background: #dc2626; }
.dw-dot.high { background: #f59e0b; }
.dw-dot.medium { background: #3b82f6; }
.dw-dot.low { background: #2F8542; }

.dw-content {
    flex: 1;
    min-width: 0;
}

.dw-name {
    display: block;
    font-weight: 500;
    font-size: 0.85rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dw-meta {
    font-size: 0.7rem;
    color: #9ca3af;
}

.dw-actions {
    display: flex;
    gap: 0.25rem;
}

.dw-btn, .dw-btn-info {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.15s;
}

.dw-btn {
    background: #1E6332;
    color: #fff;
}

.dw-btn:hover { background: #214A3E; }

.dw-btn-info {
    background: #e5e7eb;
    color: #6b7280;
}

.dw-btn-info:hover { background: #d1d5db; color: #374151; }

.doc-widget-footer {
    padding: 0.5rem 1rem;
    background: #fffbeb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #fde68a;
}

.dw-help {
    font-size: 0.7rem;
    color: #92400e;
}

.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
}

.no-docs-needed {
    background: linear-gradient(135deg, #F4F0E9 0%, #E8DFD0 100%) !important;
    border: 1px solid #86efac !important;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #166534;
    font-size: 0.85rem;
    width: auto;
    min-width: 280px;
}

.no-docs-needed i {
    font-size: 1.25rem;
    color: #18A74B;
}

@media (max-width: 900px) {
    .dashboard-top-row {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .quick-actions-inline {
        margin-right: 0;
    }
    .doc-widget {
        position: relative;
        width: 100%;
    }
}

/* When no documents needed, remove the margin */
.dashboard-top-row:has(.doc-widget[style*="display: none"]) .quick-actions-inline,
.dashboard-top-row:has(#noDocsWidget:not([style*="display: none"])) .quick-actions-inline {
    margin-right: 0;
}

/* ==================== DRAFT DOCUMENT LIST ITEMS ==================== */
.draft-doc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 8px;
    background: #fff;
    transition: border-color 0.15s;
}
.draft-doc-item:hover { border-color: #c5d0ca; }
.draft-doc-icon { font-size: 16px; flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.draft-doc-info { flex: 1; min-width: 0; }
.draft-doc-name { font-size: 13px; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-doc-meta { font-size: 11px; color: #8a8a8a; margin-top: 2px; line-height: 1.4; }
.draft-doc-policy-tag { font-size: 10px; background: #e0f2fe; color: #0369a1; padding: 2px 7px; border-radius: 4px; white-space: nowrap; display: inline-flex; align-items: center; }
.draft-doc-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.draft-doc-download { background: none; border: none; color: #1E6332; cursor: pointer; padding: 4px 8px; opacity: 0.4; transition: opacity 0.15s; font-size: 13px; }
.draft-doc-download:hover { opacity: 1; }
.draft-doc-remove { background: none; border: none; color: #dc2626; cursor: pointer; padding: 4px 8px; opacity: 0.4; transition: opacity 0.15s; font-size: 13px; }
.draft-doc-remove:hover { opacity: 1; }

/* Draft upload modal */
.draft-upload-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 10000;
    display: flex; align-items: center; justify-content: center;
}
.draft-upload-modal {
    background: #fff; border-radius: 14px; width: 560px; max-width: 95vw;
    max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.draft-upload-header {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff; padding: 16px 20px; border-radius: 14px 14px 0 0;
    display: flex; justify-content: space-between; align-items: center;
}
.draft-upload-header h4 { margin: 0; font-size: 1.1rem; }
.draft-upload-close { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; opacity: 0.8; }
.draft-upload-close:hover { opacity: 1; }
.draft-upload-context {
    background: #F4F0E9; border: 1px solid #E8DFD0; border-radius: 8px;
    padding: 10px 14px; margin: 16px 20px 0; font-size: 13px; color: #166534;
}
.draft-upload-body { padding: 16px 20px; }
.draft-upload-dropzone {
    border: 2px dashed #d1d5db; border-radius: 10px; padding: 28px 16px;
    text-align: center; cursor: pointer; transition: all 0.2s;
    background: #fafbfc; margin-bottom: 16px;
}
.draft-upload-dropzone:hover, .draft-upload-dropzone.drag-over {
    border-color: #1E6332; background: #F4F0E9;
}
.draft-upload-dropzone i { font-size: 28px; color: #9ca3af; margin-bottom: 8px; }
.draft-upload-dropzone.drag-over i { color: #1E6332; }
.draft-upload-dropzone p { margin: 4px 0; font-size: 13px; color: #6b7280; }
.draft-upload-dropzone .browse-link { color: #1E6332; font-weight: 600; text-decoration: underline; cursor: pointer; }

.draft-upload-file-list { margin-bottom: 12px; }
.draft-upload-file-row {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 6px;
    background: #fff; flex-wrap: wrap;
}
.draft-upload-file-icon { font-size: 16px; flex-shrink: 0; }
.draft-upload-file-info { flex: 1; min-width: 100px; }
.draft-upload-file-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.draft-upload-file-size { font-size: 10px; color: #9ca3af; }
.draft-upload-file-row select {
    font-size: 12px; padding: 4px 6px; border: 1px solid #d1d5db;
    border-radius: 6px; background: #fff; max-width: 140px;
}
.draft-upload-file-row select.missing-type { border-color: #dc2626; background: #fef2f2; }
.draft-upload-file-remove { background: none; border: none; color: #dc2626; cursor: pointer; padding: 2px 6px; font-size: 14px; opacity: 0.5; }
.draft-upload-file-remove:hover { opacity: 1; }

.draft-upload-footer { padding: 12px 20px; border-top: 1px solid #e5e7eb; display: flex; gap: 10px; justify-content: flex-end; }
.draft-upload-footer .btn { padding: 8px 20px; font-size: 13px; border-radius: 8px; }

/* Empty state for draft docs */
.draft-docs-empty { color: #94a3b8; font-size: 13px; padding: 8px 0; }

/* ============================================================================
   Drafts compact single-row filter bar (parallels claims-single-row).
   Tighter than claims since drafts has more control elements (urgency chips +
   Created By Me + sort all need to fit alongside search + view + trailing).
   ============================================================================ */
/* Shrink the outer filter-bar container padding */
.drafts-filter-bar {
    padding: 0.55rem 0.75rem !important;
    margin-bottom: 0.6rem !important;
    gap: 0.5rem !important;
}
.drafts-single-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.drafts-single-row .filter-search-box,
.drafts-search-box {
    flex: 1 1 180px;
    min-width: 150px;
    max-width: 260px;
    height: 28px;
}
.drafts-single-row .view-toggle-group,
.drafts-single-row .draft-sort-control,
.drafts-single-row .draft-urgency-toggles,
.drafts-single-row .created-by-me-toggle { flex: 0 0 auto; }

/* View toggle — tighter */
.drafts-single-row .drafts-view-toggle-btn {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
}

.drafts-single-row .draft-urgency-toggles {
    display: inline-flex;
    gap: 4px;
    padding: 0;
    margin: 0;
}
.drafts-single-row .draft-urgency-chip {
    padding: 3px 8px;
    font-size: 11px;
    height: 28px;
    white-space: nowrap;
    border-radius: 14px;
}
.drafts-single-row .draft-urgency-chip .urgency-dot {
    width: 6px;
    height: 6px;
}
.drafts-single-row .draft-urgency-chip .urgency-count {
    margin-left: 4px;
    font-size: 10.5px;
    padding: 1px 5px;
}

.drafts-single-row .created-by-me-toggle {
    padding: 3px 7px;
    height: 28px;
    font-size: 11.5px;
    gap: 5px;
}

/* Sort trigger — tighter */
.drafts-single-row .draft-sort-trigger-btn {
    padding: 4px 9px !important;
    font-size: 11.5px !important;
    height: 28px !important;
}

/* Spacer pushes everything after it to the right edge */
.drafts-row-spacer { flex: 1 1 0; min-width: 0; }

/* Drafts trailing action buttons — same visual as claims-action-btn, tighter */
.drafts-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    background: #fff;
    color: #374151;
    border: 1px solid #e5e1da;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    height: 28px;
}
.drafts-action-btn:hover {
    background: #F4F0E9;
    border-color: #C5BCA2;
    color: #1E6332;
}
.drafts-action-btn.primary {
    background: #1E6332;
    color: #fff;
    border-color: #1E6332;
}
.drafts-action-btn.primary:hover {
    background: #214A3E;
    border-color: #214A3E;
    color: #fff;
}
.drafts-action-btn i { font-size: 12px; }

.drafts-saved-count-badge {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: #1E6332;
    color: #fff;
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 600;
}

/* Collapse labels on narrower viewports so the row stays single-line */
@media (max-width: 1400px) {
    .drafts-single-row .drafts-action-label { display: none; }
    .drafts-single-row .drafts-action-btn { padding: 5px 9px; gap: 0; }
    .drafts-single-row .drafts-action-btn .drafts-saved-count-badge { margin-left: 4px; }
    .drafts-single-row .draft-sort-trigger-btn .draft-sort-chevron { display: none; }
}
@media (max-width: 1200px) {
    .drafts-single-row .draft-urgency-chip { padding: 4px 7px; font-size: 11px; }
    .drafts-single-row .draft-urgency-chip .urgency-count { margin-left: 3px; }
    .drafts-single-row .created-by-me-text { display: none; }
    .drafts-single-row .draft-sort-trigger-btn { padding: 5px 8px; }
    .drafts-single-row .draft-sort-trigger-btn #draftCurrentSortLabel { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* --- Saved Filters dropdown (toolbar bookmark menu for drafts) --- */
.drafts-saved-filter-menu { position: relative; }
.drafts-saved-filter-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    width: 340px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    border: 1px solid #e5e1da;
    z-index: 200;
    display: none;
    max-height: 480px;
    overflow: hidden;
    flex-direction: column;
}
.drafts-saved-filter-dropdown.show { display: flex; }
.drafts-saved-filter-header {
    padding: 10px 14px;
    border-bottom: 1px solid #eee7d9;
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(90deg, #F4F0E9, #fff);
    font-size: 13.5px;
    color: #1E6332;
}
.drafts-saved-filter-close {
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 13px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.drafts-saved-filter-close:hover { background: #F4F0E9; color: #231F20; }
.drafts-saved-filter-body { flex: 1; overflow-y: auto; padding: 6px; }
.drafts-saved-filter-footer { padding: 10px 12px; border-top: 1px solid #eee7d9; }

/* Drafts inline save-filter name prompt — same look as claims */
.drafts-save-filter-prompt {
    margin-top: 8px;
}

/* ============================================================================
   Drafts list — compact cell padding + universal cell ellipsis so content
   never spills into adjacent columns (parallels claims table pass).
   Tightened further in round 2: more rows per screen, smaller policy chips.
   ============================================================================ */
.drafts-list-table th {
    padding: 6px 10px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.4px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
.drafts-list-table td {
    padding: 6px 10px !important;
    font-size: 0.82rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Policies list cell — chips wrap within the cell, each chip always shows its
   FULL content (IC logo + name + amount) without truncation. The count badge
   was removed per user feedback (policy count is visible from the chips). */
.drafts-list-table .draft-list-policies {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
/* Chip itself — no max-width, no ellipsis. Allow it to size to its content so
   the IC name + amount are always fully visible. flex-wrap on the parent puts
   chips on their own line when the cell is too narrow for them side-by-side. */
.drafts-list-table .draft-policy-chip {
    font-size: 0.72rem !important;
    padding: 2px 7px !important;
    line-height: 1.25 !important;
    white-space: nowrap;
    flex: 0 0 auto;  /* don't shrink */
}
/* Shrink IC logos inside drafts list chips — default .ic-logo is 32px tall
   which dominates row height. In the dense list view a 16px logo keeps the
   brand visible without blowing up row heights. */
.drafts-list-table .draft-policy-chip .ic-logo {
    height: 16px !important;
    max-width: 36px !important;
}
.drafts-list-table .draft-policy-chip .ic-logo-fallback {
    font-size: 12px !important;
    width: 14px !important;
}
.drafts-list-table .draft-policy-chip .ic-badge {
    gap: 4px !important;
}
/* Policies cell must allow flex-wrap height (not constrain single-line) AND
   must NOT clip a chip that's wider than the cell — since we removed ellipsis,
   any chip that doesn't fit wraps onto its own line instead. */
.drafts-list-table td.drafts-policies-cell {
    white-space: normal !important;
    overflow: visible !important;
}
.drafts-list-table .draft-list-name {
    font-size: 0.85rem;
    line-height: 1.25;
}
.drafts-list-table .draft-list-funeral {
    font-size: 0.72rem;
    line-height: 1.2;
    color: #6b7280;
}
.drafts-list-table .draft-list-amount {
    font-size: 0.82rem;
    font-weight: 600;
}
.drafts-list-table .draft-list-progress {
    display: flex;
    align-items: center;
    gap: 6px;
}
.drafts-list-table .draft-list-progress-bar {
    height: 5px;
    flex: 1;
}
.drafts-list-table .draft-list-progress-text {
    font-size: 0.7rem !important;
}
.drafts-list-table .draft-list-expires-badge {
    font-size: 0.7rem !important;
    padding: 1px 7px !important;
    line-height: 1.25;
}
/* Shrink the row action buttons too */
.drafts-list-table .draft-list-action-btn {
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
    height: 26px;
    line-height: 1;
}

/* Actions column — allow its flex container of buttons to show without ellipsis-clipping */
.drafts-list-table td.drafts-tbl-actions-col,
.drafts-list-table th.drafts-tbl-actions-col {
    overflow: visible !important;
}
/* Expand row — needs full height + no clipping for its inner animated content */
.drafts-list-table tr.draft-expand-row td {
    overflow: visible !important;
    white-space: normal !important;
    padding: 0 !important;
}
/* Decedent/FH cell — two-line layout needs normal white-space behavior */
.drafts-list-table td:has(.draft-list-funeral) {
    white-space: normal;
}

/* ============================================================================
   Drafts sticky scrollbars (top + bottom proxies). Native scrollbar on
   .drafts-list-wrap is hidden so only the two proxies show — JS syncs them.
   ============================================================================ */
.drafts-list-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    /* Hide the native horizontal scrollbar — sticky proxies above/below are the
       visible ones, JS syncs scrollLeft across all three. */
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE / legacy Edge */
}
.drafts-list-wrap::-webkit-scrollbar { display: none; }  /* Chrome / Safari / new Edge */

/* ============================================================
   FROZEN-HEADER VIEWPORT LOCK (desktop ≥769px) — mirrors Claims.
   The page is viewport-locked in layout.css. Build the flex column so:
   Active/Archived tabs (frozen) → filter toolbar (frozen) → the active
   view (cards OR list, scrolls internally) → "Drafts Data" band frozen
   with the <thead> sticky below it. Native green scrollbars only — the
   sticky proxy bars are removed (redundant under the lock, they caused
   the double-line on Claims). Mobile keeps its existing page-scroll
   behavior (excluded via the ≥769px gate).
   ============================================================ */
@media (min-width: 769px) {
    #page-drafts.active .dashboard-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    /* Frozen top sections */
    #page-drafts.active .drafts-tabs { flex: 0 0 auto; }
    #page-drafts.active .drafts-filter-bar { flex: 0 0 auto; }

    /* Card view — content-sized when few drafts, scrolls when many */
    #page-drafts.active .drafts-grid {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* List view — frozen "Drafts Data" band + sticky column header */
    #page-drafts.active .drafts-list-container {
        flex: 0 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    #page-drafts.active .drafts-table-header { flex: 0 0 auto; }
    /* Drop both proxy scrollbars — under the lock the wrap is a fixed
       pane so its native bars are always visible (same fix as Claims). */
    #page-drafts.active .drafts-sticky-scrollbar { display: none; }
    #page-drafts.active .drafts-list-wrap {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: scroll;
        overflow-y: scroll;
        scrollbar-width: thin;                 /* Firefox */
        scrollbar-color: #2F8542 transparent;
        -ms-overflow-style: auto;
    }
    /* Re-enable + brand the native scrollbars green (base rule at line
       ~2228 hid them with display:none). */
    #page-drafts.active .drafts-list-wrap::-webkit-scrollbar {
        display: block;
        width: 12px;
        height: 12px;
    }
    #page-drafts.active .drafts-list-wrap::-webkit-scrollbar-track { background: #f1efe9; }
    #page-drafts.active .drafts-list-wrap::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #2F8542 0%, #1E6332 100%);
        border-radius: 6px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    #page-drafts.active .drafts-list-wrap::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #1E6332 0%, #214A3E 100%);
        background-clip: padding-box;
    }
    #page-drafts.active .drafts-list-wrap::-webkit-scrollbar-corner { background: #f1efe9; }

    /* Freeze the column header. .drafts-list-table th had NO sticky — add
       it + an opaque background so rows don't show through while scrolling. */
    #page-drafts.active .drafts-list-table th {
        position: sticky;
        top: 0;
        z-index: 10;
        background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
    }
}

.drafts-sticky-scrollbar {
    position: sticky;
    bottom: 0;
    z-index: 13;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
.drafts-top-scrollbar {
    position: sticky;
    top: 0;
    bottom: auto;
    border-top: none;
    border-bottom: 1px solid #e2e8f0;
}
.drafts-scrollbar-inner {
    overflow-x: auto;
    overflow-y: hidden;
}
.drafts-scrollbar-spacer { height: 1px; }

/* Draggable column header cursor/visual (parallels claims) */
.drafts-list-table thead th[draggable="true"] { cursor: grab; }
.drafts-list-table thead th[draggable="true"]:active { cursor: grabbing; }
.drafts-list-table thead th.dragging { opacity: 0.4; }
.drafts-list-table thead th.drag-over { border-left: 3px solid #1E6332; }
.drafts-th-label { user-select: none; }

/* ── Document → claim assignment (Step 3 review) ────────────────────────────
   Every document must belong to exactly ONE claim. With two or more policies
   the picker appears under each document; an unassigned one is flagged amber
   and blocks submission. */
.draft-doc-claim-row {
    margin-top: 6px;
}
.draft-doc-claim-select {
    font-size: 12px;
    padding: 4px 8px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    max-width: 100%;
    min-width: 200px;
    cursor: pointer;
}
.draft-doc-claim-select:focus {
    outline: none;
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, .12);
}
.draft-doc-unassigned {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
    font-size: 11px;
    font-weight: 600;
}
body.dark-theme .draft-doc-claim-select {
    background: var(--theme-input-bg);
    border-color: var(--theme-border);
    color: var(--theme-text);
}
body.dark-theme .draft-doc-unassigned {
    background: rgba(245, 158, 11, .12);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, .35);
}

/* Files staged during a claim edit — held back until the changes are saved. */
.draft-doc-item.draft-doc-pending {
    background: #fffdf7;
    border-color: #e8dcc4;
    border-left: 3px solid #C19A6B;
}
.draft-doc-pending-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f6efe4;
    color: #8a6536;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 10.5px;
    font-weight: 600;
}
.draft-doc-pending .draft-doc-claim-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.draft-doc-other-input {
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    min-width: 190px;
    font-family: inherit;
}
.draft-doc-other-input:focus {
    outline: none;
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12);
}