/* claims.css - Create claim form, claims page, advanced filter bar, advanced filters panel */

/* ==================== CREATE CLAIM STYLES ==================== */
.step-nav {
    width: 280px;
    flex-shrink: 0;
    padding: 2.5rem 1.5rem 2.5rem 2.5rem;
    background: #fff;
    position: fixed;
    left: var(--sidebar-width-expanded);
    top: var(--header-height);
    bottom: 50px; /* Above footer */
    overflow-y: auto;
    z-index: 10;
    border-right: 1px solid #f0f0f0;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed sidebar state */
.sidebar-collapsed .step-nav {
    left: var(--sidebar-width-collapsed);
}

.step-item {
    display: flex;
    align-items: center;
    position: relative;
    padding-bottom: 2.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.step-item:last-child {
    padding-bottom: 0;
}

/* Connecting line */
.step-item::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 50px;
    bottom: -6px;
    width: 2px;
    background-color: #dee2e6;
    transition: background-color 0.3s ease;
}

.step-item:last-child::before {
    display: none;
}

/* Completed step line turns green */
.step-item.completed::before {
    background-color: #1E6332;
}

.step-number {
    font-size: 1.1rem;
    font-weight: 600;
    color: #6b7280;
    margin-right: 1rem;
    min-width: 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: #fff;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Active step - larger and highlighted */
.step-item.active .step-number {
    color: #1f2937;
    border-color: #9ca3af;
    background-color: #f9fafb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Completed step - green circle with checkmark */
.step-item.completed .step-number {
    color: #fff;
    border-color: #1E6332;
    background: #fff;
    border-width: 2.5px;
}

.step-item.completed .step-number::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1.1rem;
    color: #1E6332;
}

.step-item.completed .step-number span {
    display: none;
}

.step-label {
    font-size: 1.1rem;
    font-weight: 500;
    color: #9ca3af;
    transition: all 0.3s ease;
}

.step-item:hover .step-label {
    color: #6b7280;
}

.step-item.active .step-label {
    color: #1f2937;
    text-decoration: underline;
    text-decoration-color: #1E6332;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.step-item.completed .step-label {
    color: #1f2937;
}

.form-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2.5rem 3rem 2rem 0;
    overflow-y: auto;
}

.form-content {
    width: 100%;
    max-width: 650px;
}

.step-title {
    font-size: 2.25rem;
    font-weight: 400;
    color: #212529;
    margin-bottom: 2rem;
}

.form-label {
    font-weight: 400;
    color: #212529;
    margin-bottom: 0.625rem;
    font-size: 1.125rem;
}

.form-label .required {
    color: #dc3545;
}

.form-select, .form-control {
    font-size: 1.125rem;
    padding: 0.625rem 1rem;
    border-color: #ced4da;
    border-radius: 0.25rem;
}

.form-select:focus, .form-control:focus {
    border-color: #1E6332;
    box-shadow: 0 0 0 0.2rem rgba(30, 99, 50, 0.15);
}


.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.radio-group .form-check {
    margin-bottom: 0;
}

.radio-group .form-check-label {
    font-size: 1.05rem;
    color: #212529;
}

.form-check-input:checked {
    background-color: #1E6332;
    border-color: #1E6332;
}

.info-notes {
    margin-top: 1.5rem;
}

.info-notes-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #212529;
    margin-bottom: 0.5rem;
}

.info-note-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: #6c757d;
    margin-bottom: 0.375rem;
}

.info-note-item i {
    color: #6c757d;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.add-card {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1.5rem;
    margin-top: 1rem;
}

.add-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.add-card-header i {
    color: #1E6332;
}

.list-table-header {
    display: flex;
    justify-content: space-between;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: #6c757d;
}

.add-link {
    color: #1E6332;
    text-decoration: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

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

.card-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

.form-nav {
    margin-top: 2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

.form-nav .save-draft-link {
    margin-left: auto;
    color: #6c757d;
    text-decoration: none;
    cursor: pointer;
}

.form-nav .save-draft-link:hover {
    text-decoration: underline;
}

.form-nav .btn-submit-claim {
    background-color: #e9ecef;
    border-color: #dee2e6;
    color: #6c757d;
}

.btn-next, .btn-prev {
    padding: 0.5rem 1.5rem;
    font-size: 1.125rem;
}

.input-with-toggle {
    position: relative;
}

.input-with-toggle input {
    padding-right: 40px;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
}


/* ==================== CLAIMS PAGE STYLES ==================== */
.claims-page {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 0.5rem 1.25rem 1rem;  /* tight top, normal sides + bottom */
    border-radius: 1rem;
}

.claims-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(30, 99, 50, 0.1);
}

.claims-header-left h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
}

.claims-header-left h2 i {
    color: #1E6332;
    background: linear-gradient(135deg, #F4F0E9, #E8DFD0);
    padding: 0.75rem;
    border-radius: 0.75rem;
}

.claims-header-left p {
    margin: 0.5rem 0 0 0;
    color: #6b7280;
}

/* Reports Page Header */
.reports-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(30, 99, 50, 0.1);
}

.reports-header-left h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
}

.reports-header-left h2 i {
    color: #1E6332;
    background: linear-gradient(135deg, #F4F0E9, #E8DFD0);
    padding: 0.75rem;
    border-radius: 0.75rem;
}

.reports-header-left p {
    margin: 0.5rem 0 0 0;
    color: #6b7280;
}

.reports-header-actions {
    display: flex;
    gap: 0.75rem;
}

/* ==================== ADVANCED FILTER BAR ====================
   Sticky (NOT fixed). Pins to the top of the viewport while the table
   below scrolls, but stays in document flow so its real height is
   respected — when the bar wraps to multiple lines (active filters row,
   saved filter prompt, advanced filters panel), the table drops below
   naturally instead of being hidden behind a fixed-height overlay.

   Compact padding + tight inter-row gap so the bar gives back as much
   vertical real-estate to the data table as possible — especially when
   the active-filters row appears underneath the controls.
   ============================================================ */
.claims-content .claims-filter-bar {
    position: sticky;
    /* top:0 means "pin to the top of the scrolling ancestor" — and the
       scrolling ancestor is `.main-content`, which already lives BELOW the
       global header. Using `top: var(--header-height)` here was a leftover
       from when this bar was position:fixed — fixed measures from viewport
       (so 60px = below the global header), but sticky measures from the
       scroll container, so 60px was creating a 60px gap on top of an
       already-offset start point. */
    top: 0;
    z-index: 100;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 0.75rem;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 0.55rem 0.85rem;
    margin: 0 0 0.6rem 0;
    gap: 0.4rem !important;
}

.claims-content {
    /* `.claims-page` (the parent) already supplies 1rem 1.25rem padding around
       the whole page area — adding more here just creates a redundant gap
       between the page top and the sticky filter bar. Keep this at 0. */
    padding: 0;
}

/* Filter Bar Top Row */
.filter-bar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.5rem;
    gap: 1rem;
    border-bottom: 1px solid #f3f4f6;
}

/* Search Box */
.filter-search-box {
    flex: 1;
    max-width: 400px;
    position: relative;
    display: flex;
    align-items: center;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0 1rem;
    transition: all 0.2s ease;
}

.filter-search-box:focus-within {
    background: #fff;
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.1);
}

.filter-search-box i {
    color: #9ca3af;
    font-size: 0.9rem;
}

.filter-search-box input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    outline: none;
}

.filter-search-box input::placeholder {
    color: #9ca3af;
}

/* Filter Bar Actions */
.filter-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

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

.filter-toggle-btn:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e5e7eb 100%);
    border-color: #d1d5db;
}

.filter-toggle-btn.active {
    background: linear-gradient(135deg, #1E6332 0%, #214A3E 100%);
    border-color: #1E6332;
    color: #fff;
}

.filter-toggle-btn .filter-count {
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

/* Sort Control (Advanced) */
.sort-control {
    position: relative;
}

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

.sort-trigger-btn:hover {
    border-color: #1E6332;
    background: #fff;
}

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

.sort-trigger-btn i:first-child {
    color: #1E6332;
}

.sort-chevron {
    font-size: 0.65rem;
    color: #9ca3af;
    transition: transform 0.2s ease;
}

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

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

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

@keyframes sortPanelIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

.sort-panel-body {
    padding: 1rem;
}

.sort-section-group {
    margin-bottom: 1rem;
}

.sort-section-group:last-child {
    margin-bottom: 0;
}

.sort-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}

.sort-select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #374151;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sort-select:hover {
    border-color: #d1d5db;
}

.sort-select:focus {
    outline: none;
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.1);
}

.sort-select optgroup {
    font-weight: 600;
    color: #374151;
}

/* Quick Sort Presets */
.sort-quick-section {
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
}

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

.sort-preset-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 0.5rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sort-preset-btn i {
    font-size: 0.9rem;
    color: #9ca3af;
    transition: color 0.2s ease;
}

.sort-preset-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

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

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

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

/* Quick Filter Presets */
.quick-filter-presets {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1.5rem 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid #f3f4f6;
}

/* Location Multi-Select Filter */
.claims-loc-filter { position: relative; }

.cloc-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.3rem 0.55rem;
    border: 1px solid #e0dcd6;
    border-radius: 8px;
    font-size: 0.78rem;
    color: #3d3a37;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s;
}

.cloc-trigger:hover { border-color: #1E6332; }
.cloc-icon { color: #8a8580; font-size: 0.72rem; }
.cloc-arrow { color: #aaa; font-size: 0.6rem; margin-left: 2px; }
.cloc-label.cloc-active { color: #1E6332; font-weight: 600; }

.cloc-panel {
    position: fixed;
    width: 280px;
    background: #fff;
    border: 1px solid #e0dcd6;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 9999;
    overflow: hidden;
}

.cloc-search-wrap {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #f0ede8;
    gap: 6px;
}

.cloc-search-icon { color: #aaa; font-size: 0.75rem; }

.cloc-search {
    border: none;
    outline: none;
    font-size: 0.78rem;
    flex: 1;
    background: transparent;
}

.cloc-actions {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid #f0ede8;
}

.cloc-action-btn {
    padding: 2px 8px;
    font-size: 0.68rem;
    font-weight: 600;
    border: 1px solid #e0dcd6;
    border-radius: 5px;
    background: #fff;
    color: #6b6560;
    cursor: pointer;
    transition: all 0.12s;
}

.cloc-action-btn:hover { background: #F4F0E9; color: #1E6332; border-color: #1E6332; }

.cloc-options {
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 0;
}

.cloc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.1s;
}

.cloc-item:hover { background: #f8f7f5; }
.cloc-item.checked { background: #f0faf4; }

.cloc-item input[type="checkbox"] {
    accent-color: #1E6332;
    width: 14px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.cloc-item-name {
    flex: 1;
    font-size: 0.76rem;
    color: #3d3a37;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cloc-item-count {
    font-size: 0.65rem;
    color: #8a8580;
    background: #f3f2f0;
    padding: 1px 6px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Location with 0 matching claims (given the active status/other filters) — greyed
   + not selectable. The item-click handler also ignores .cloc-disabled. */
.cloc-item.cloc-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.cloc-item.cloc-disabled .cloc-item-name { color: #9ca3af; }
.cloc-item.cloc-disabled input { cursor: not-allowed; }

.cloc-empty {
    padding: 16px;
    text-align: center;
    color: #aaa;
    font-size: 0.78rem;
}

.quick-filter-presets::-webkit-scrollbar {
    display: none;
}

.quick-filter-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.quick-filter-chip .qf-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #9ca3af;
}

.quick-filter-chip:hover {
    transform: translateY(-1px);
    opacity: 0.85;
}

.quick-filter-chip .chip-count {
    background: rgba(0, 0, 0, 0.08);
    padding: 0.05rem 0.4rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.1rem;
    min-width: 1.1rem;
    text-align: center;
}

/* Status-specific dot colors (always visible) */
.quick-filter-chip.status-all .qf-dot { background: #1E6332; }
.quick-filter-chip.status-attention .qf-dot { background: #dc2626; }
.quick-filter-chip.status-pending-docs .qf-dot { background: #a855f7; }
.quick-filter-chip.status-in-process .qf-dot { background: #ea580c; }
.quick-filter-chip.status-funded .qf-dot { background: #18A74B; }
.quick-filter-chip.status-closed .qf-dot { background: #3b82f6; }
.quick-filter-chip.status-recent .qf-dot { background: #0ea5e9; }
.quick-filter-chip.status-withdrawn .qf-dot { background: #dc2626; }

/* All (green) */
.quick-filter-chip.status-all.active {
    background: #F4F0E9; color: #1E6332; border-color: #1E6332;
}
.quick-filter-chip.status-all.active .chip-count { background: rgba(30, 99, 50,0.15); color: #1E6332; }

/* Needs Attention (red/danger) */
.quick-filter-chip.status-attention.active {
    background: #fef2f2; color: #dc2626; border-color: #dc2626;
}
.quick-filter-chip.status-attention.active .chip-count { background: rgba(220,38,38,0.15); color: #dc2626; }

/* Attention Needed is a standalone TOGGLE, not a status chip — set it apart
   from the status multi-select with a divider, and keep its icon red even
   when inactive so it always reads as the "needs attention" affordance. */
.quick-filter-chip.qf-attention {
    margin-left: 0.4rem;
    padding-left: 0.85rem;
    border-left: 1px solid #d8d2c6;
}
.quick-filter-chip.qf-attention i { color: #dc2626; font-size: 0.8rem; }

/* Ongoing soft "alarm" when ≥1 claim needs attention — .attn-alarm is toggled
   on #attentionChip by updateQuickFilterCounts(). The icon does a brief
   bell-shake on a periodic loop (calm between pulses so it alerts without
   being annoying) and the chip breathes a soft red halo. */
@keyframes attnAlarmGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.16); }
}
@keyframes attnAlarmShake {
    0%, 80%, 100% { transform: rotate(0); }
    82% { transform: rotate(-13deg); }
    84% { transform: rotate(11deg); }
    86% { transform: rotate(-9deg); }
    88% { transform: rotate(7deg); }
    90% { transform: rotate(-4deg); }
    92% { transform: rotate(2deg); }
    95% { transform: rotate(0); }
}
.quick-filter-chip.qf-attention.attn-alarm {
    animation: attnAlarmGlow 2s ease-in-out infinite;
}
.quick-filter-chip.qf-attention.attn-alarm i {
    display: inline-block;       /* enable transform on the <i> */
    transform-origin: 50% 0;     /* pivot at the top, like a ringing bell */
    animation: attnAlarmShake 2.4s ease-in-out infinite;
}
/* Respect users who prefer reduced motion — keep the red color cue, drop the
   movement/halo. */
@media (prefers-reduced-motion: reduce) {
    .quick-filter-chip.qf-attention.attn-alarm,
    .quick-filter-chip.qf-attention.attn-alarm i {
        animation: none;
    }
}

/* Unread Messages — standalone toggle (blue), set apart with a divider like
   Attention Needed; envelope icon stays blue even when inactive. */
.quick-filter-chip.qf-unread {
    margin-left: 0.4rem;
    padding-left: 0.85rem;
    border-left: 1px solid #d8d2c6;
}
.quick-filter-chip.qf-unread i { color: #2563eb; font-size: 0.8rem; }
.quick-filter-chip.status-unread.active {
    background: #eff6ff; color: #1d4ed8; border-color: #3b82f6;
}
.quick-filter-chip.status-unread.active .chip-count { background: rgba(37,99,235,0.15); color: #1d4ed8; }

/* Pending Docs (purple) */
.quick-filter-chip.status-pending-docs.active {
    background: #faf5ff; color: #7c3aed; border-color: #a855f7;
}
.quick-filter-chip.status-pending-docs.active .chip-count { background: rgba(168,85,247,0.15); color: #7c3aed; }

/* In Process (orange) */
.quick-filter-chip.status-in-process.active {
    background: #fff7ed; color: #c2410c; border-color: #ea580c;
}
.quick-filter-chip.status-in-process.active .chip-count { background: rgba(234,88,12,0.15); color: #c2410c; }

/* Funded (green) */
.quick-filter-chip.status-funded.active {
    background: #F4F0E9; color: #1E6332; border-color: #18A74B;
}
.quick-filter-chip.status-funded.active .chip-count { background: rgba(47, 133, 66,0.15); color: #1E6332; }

/* Closed (blue) */
.quick-filter-chip.status-closed.active {
    background: #eff6ff; color: #1d4ed8; border-color: #3b82f6;
}
.quick-filter-chip.status-closed.active .chip-count { background: rgba(59,130,246,0.15); color: #1d4ed8; }

/* Recent (sky blue) */
.quick-filter-chip.status-recent.active {
    background: #f0f9ff; color: #0369a1; border-color: #0ea5e9;
}
.quick-filter-chip.status-recent.active .chip-count { background: rgba(14,165,233,0.15); color: #0369a1; }

/* Withdrawn (red) */
.quick-filter-chip.status-withdrawn.active {
    background: #fef2f2; color: #dc2626; border-color: #dc2626;
}
.quick-filter-chip.status-withdrawn.active .chip-count { background: rgba(220,38,38,0.15); color: #dc2626; }

/* ═══════════════════════════════════════════════════════════════════════
   Status filter CHECKBOXES (the 4 stage filters: In Process / Funded /
   Closed / Withdrawn). Marketing asked for checkboxes with stage-colored
   labels instead of the "bubble" pills (the current Hub look). Only the
   .qf-checkbox elements; the Attention Needed / Unread Messages chips keep
   the pill style. applyQuickFilter() + the .active class are unchanged —
   .active simply means "checked" here. Placed after the pill .active rules
   so these win on equal specificity.
   Stage colors: In Process #c19a6b · Funded #1e6332 · Closed #475453 · Withdrawn #db0000
   ═══════════════════════════════════════════════════════════════════════ */
.quick-filter-chip.qf-checkbox,
.quick-filter-chip.qf-checkbox.active {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    gap: 0.4rem;
    color: #374151;
}
.quick-filter-chip.qf-checkbox:hover,
.quick-filter-chip.qf-checkbox.active:hover {
    transform: none;
    opacity: 1;
    background: rgba(0, 0, 0, 0.045);
}
/* The checkbox square */
.quick-filter-chip.qf-checkbox .qf-box {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}
/* Checkmark — shown only when active (checked) */
.quick-filter-chip.qf-checkbox.active .qf-box::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* Label — always the stage color (checked or not) */
.quick-filter-chip.qf-checkbox .qf-label {
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1;
}
.quick-filter-chip.qf-checkbox .chip-count {
    background: rgba(0, 0, 0, 0.06);
    color: #6b7280;
}
/* Per-stage label color + checked-box fill */
.quick-filter-chip.qf-checkbox.status-in-process .qf-label { color: #c19a6b; }
.quick-filter-chip.qf-checkbox.status-in-process.active .qf-box { background: #c19a6b; border-color: #c19a6b; }

.quick-filter-chip.qf-checkbox.status-funded .qf-label { color: #1e6332; }
.quick-filter-chip.qf-checkbox.status-funded.active .qf-box { background: #1e6332; border-color: #1e6332; }

.quick-filter-chip.qf-checkbox.status-closed .qf-label { color: #475453; }
.quick-filter-chip.qf-checkbox.status-closed.active .qf-box { background: #475453; border-color: #475453; }

.quick-filter-chip.qf-checkbox.status-withdrawn .qf-label { color: #db0000; }
.quick-filter-chip.qf-checkbox.status-withdrawn.active .qf-box { background: #db0000; border-color: #db0000; }

/* Dark theme (BETA): dark box + lighter variants of the two dim labels so they
   stay legible on a dark surface. Checked-box fills (stage colors) keep the
   white check, which reads fine on dark. */
body.dark-theme .quick-filter-chip.qf-checkbox .qf-box { background: #1f2937; border-color: #4b5563; }
body.dark-theme .quick-filter-chip.qf-checkbox .chip-count { background: rgba(255, 255, 255, 0.1); color: #cbd5e1; }
body.dark-theme .quick-filter-chip.qf-checkbox:hover { background: rgba(255, 255, 255, 0.06); }
body.dark-theme .quick-filter-chip.qf-checkbox.status-in-process .qf-label { color: #d6b483; }
body.dark-theme .quick-filter-chip.qf-checkbox.status-funded .qf-label { color: #4ade80; }
body.dark-theme .quick-filter-chip.qf-checkbox.status-closed .qf-label { color: #94a3b8; }

/* A filter chip with a faceted count of 0 (nothing to filter to, given the other
   active filters) — greyed out and not clickable. Active chips are never disabled
   (so they can always be toggled back off). Applies to the stage checkboxes AND the
   Attention Needed / Unread Messages chips. */
.quick-filter-chip.qf-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* Withdrawn Toggle — inline switch in quick filter bar */
.withdrawn-toggle-divider {
    width: 1px;
    height: 20px;
    background: #d1d5db;
    flex-shrink: 0;
    margin: 0 0.2rem;
}

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

.withdrawn-toggle:hover {
    background: #f3f4f6;
}

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

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

.withdrawn-toggle-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);
}

.withdrawn-toggle input:checked + .withdrawn-toggle-slider {
    background: #dc2626;
}

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

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

.withdrawn-toggle input:checked ~ .withdrawn-toggle-text {
    color: #dc2626;
    font-weight: 600;
}

/* Active Filters Row */
.active-filters-row {
    /* Sits inside the .claims-filter-bar flex container as its own row. Tight
       padding keeps the bar's total wrapped height short so the data table
       below has more vertical room. flex-basis 100% forces it to its own line
       BELOW the controls (instead of fighting for horizontal space with them). */
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: rgba(193, 154, 107, 0.15);   /* caramel #c19a6b wash */
    border: 1px solid #c19a6b;
    border-radius: 6px;
}

.active-filters-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #8a6536;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.active-filters-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1;
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: #fff;
    border: 1px solid #d9c3a0;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #8a6536;
    white-space: nowrap;
}

.active-filter-chip .remove-filter {
    cursor: pointer;
    margin-left: 0.2rem;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.active-filter-chip .remove-filter:hover {
    opacity: 1;
}

/* Saved-filter chip variant — visually distinct so the user can tell at a
   glance that these filters came from a saved view (not individually picked).
   Styled with brand green to stand out from the amber filter chips. */
.active-filter-chip.active-filter-chip-saved {
    background: #1E6332;
    border-color: #1E6332;
    color: #fff;
    font-weight: 600;
}
.active-filter-chip.active-filter-chip-saved i.fa-bookmark {
    color: #fff;
    font-size: 11px;
}
.active-filter-chip.active-filter-chip-saved .remove-filter {
    opacity: 0.85;
}
.active-filter-chip.active-filter-chip-saved .remove-filter:hover {
    opacity: 1;
}

.clear-all-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    background: #fff;
    border: 1.5px solid #f59e0b;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #92400e;
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0;
    margin-left: auto; /* pin Clear All to the right edge of the active-filters row */
}

.clear-all-filters-btn:hover {
    background: #f59e0b;
    color: #fff;
    border-color: #f59e0b;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.30);
}

.clear-all-filters-btn i { font-size: 10px; }

/* ==================== SAVED FILTERS ROW ==================== */
.saved-filters-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    overflow-x: auto;
    scrollbar-width: none;
}
.saved-filters-row::-webkit-scrollbar {
    display: none;
}
.saved-filters-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.saved-filters-label i {
    color: #6366f1;
    font-size: 0.7rem;
}
.saved-filters-chips {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.saved-filters-chips::-webkit-scrollbar {
    display: none;
}
.saved-filter-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 16px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #4338ca;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.saved-filter-chip:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15);
}
.saved-filter-chip.active {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.saved-filter-chip.active i {
    color: #fff;
}
.saved-filter-chip i.fa-bookmark {
    font-size: 0.65rem;
    color: #6366f1;
}
.saved-filter-chip.active i.fa-bookmark {
    color: rgba(255, 255, 255, 0.8);
}
.saved-filter-chip .saved-filter-delete {
    font-size: 0.6rem;
    color: #818cf8;
    margin-left: 0.15rem;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    padding: 2px;
}
.saved-filter-chip:hover .saved-filter-delete {
    opacity: 1;
}
.saved-filter-chip.active .saved-filter-delete {
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}
.saved-filter-chip .saved-filter-delete:hover {
    color: #dc2626 !important;
}
/* Save Filter Button */
.save-filter-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    background: transparent;
    border: 1px dashed #94a3b8;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.save-filter-btn:hover {
    border-color: #6366f1;
    color: #6366f1;
    background: #eef2ff;
}
/* Inline Name Prompt */
.saved-filter-prompt {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}
.saved-filter-prompt input {
    width: 150px;
    padding: 0.3rem 0.6rem;
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    font-size: 0.78rem;
    background: #fff;
    color: #1e1b4b;
}
.saved-filter-prompt input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.saved-filter-confirm-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: #6366f1;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    transition: background 0.15s ease;
}
.saved-filter-confirm-btn:hover {
    background: #4f46e5;
}
.saved-filter-cancel-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    transition: all 0.15s ease;
}
.saved-filter-cancel-btn:hover {
    border-color: #dc2626;
    color: #dc2626;
}

/* ==================== ADVANCED FILTERS PANEL ==================== */
.advanced-filters-panel {
    max-height: calc(100vh - var(--header-height) - 200px);
    max-height: calc(100dvh - var(--header-height) - 200px);
    background: #fff;
    border-top: 1px solid #e5e7eb;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.advanced-filters-panel.open {
    display: flex;
}

/* Filters Grid - Scrollable */
.advanced-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    align-content: start;
}

@media (min-width: 1400px) {
    .advanced-filters-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1200px) {
    .advanced-filters-grid {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }
}

@media (max-width: 900px) {
    .advanced-filters-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 600px) {
    .advanced-filters-grid {
        grid-template-columns: 1fr;
    }

    .filter-section-wide {
        grid-column: span 1 !important;
    }
}

/* Filter Section */
.filter-section {
    background: #f9fafb;
    border-radius: 8px;
    padding: 0.65rem;
    border: 1px solid #e5e7eb;
    min-width: 0;
    height: fit-content;
}

.filter-section-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e5e7eb;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.filter-section-header i {
    color: #1E6332;
    font-size: 0.75rem;
}

/* Filter Checkbox Group */
.filter-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-checkbox-group.scrollable {
    max-height: 100px;
    overflow-y: auto;
    padding-right: 0.25rem;
    scrollbar-width: thin;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.25rem 0.35rem;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.filter-checkbox:hover {
    background: #e5e7eb;
}

.filter-checkbox input {
    display: none;
}

.checkbox-custom {
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.filter-checkbox input:checked + .checkbox-custom {
    background: #1E6332;
    border-color: #1E6332;
}

.filter-checkbox input:checked + .checkbox-custom::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.55rem;
    color: #fff;
}

.checkbox-label {
    font-size: 0.75rem;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkbox-label i {
    font-size: 0.7rem;
}

/* Date Filter */
.filter-date-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.date-preset-btn {
    padding: 0.2rem 0.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.date-preset-btn:hover,
.date-preset-btn.active {
    background: #1E6332;
    border-color: #1E6332;
    color: #fff;
}

.filter-date-inputs {
    display: flex;
    gap: 0.35rem;
}

.date-input-group {
    flex: 1;
    min-width: 0;
}

.date-input-group label {
    display: block;
    font-size: 0.65rem;
    color: #6b7280;
    margin-bottom: 0.2rem;
}

.date-input-group input {
    width: 100%;
    padding: 0.3rem 0.4rem;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 0.7rem;
    background: #fff;
}

.date-input-group input:focus {
    outline: none;
    border-color: #1E6332;
}

/* Amount Filter */
.filter-amount-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.amount-preset-btn {
    padding: 0.2rem 0.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.amount-preset-btn:hover,
.amount-preset-btn.active {
    background: #1E6332;
    border-color: #1E6332;
    color: #fff;
}

.filter-range-inputs {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
}

.range-input-group {
    flex: 1;
    min-width: 0;
}

.range-input-group label {
    display: block;
    font-size: 0.65rem;
    color: #6b7280;
    margin-bottom: 0.2rem;
}

.currency-input {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.currency-input span {
    padding: 0.4rem 0.5rem;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.8rem;
    border-right: 1px solid #e5e7eb;
}

.currency-input input {
    flex: 1;
    border: none;
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
    outline: none;
    width: 100%;
    min-width: 0;
}

.range-separator {
    color: #9ca3af;
    padding-bottom: 0.4rem;
}

/* Fee Slider */
.filter-slider-container {
    padding: 0.5rem 0;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.slider-labels span:nth-child(2) {
    font-weight: 600;
    color: #1E6332;
}

.filter-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, #1E6332 0%, #e5e7eb 0%);
    outline: none;
}

.filter-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1E6332;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.filter-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.fee-filter-options {
    margin-top: 0.75rem;
}

/* Search Select */
.filter-search-select {
    margin-bottom: 0.5rem;
}

.filter-search-select input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.8rem;
    background: #fff;
}

.filter-search-select input:focus {
    outline: none;
    border-color: #1E6332;
}

/* Sort Options */
.filter-sort-options select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.85rem;
    background: #fff;
    cursor: pointer;
    color: #374151;
}

.filter-sort-options select:focus {
    outline: none;
    border-color: #1E6332;
}

/* Full-width Select for Sort */
.filter-select-full {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.8rem;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") right 0.5rem center/12px no-repeat;
    cursor: pointer;
    color: #374151;
    appearance: none;
}

.filter-select-full:focus {
    outline: none;
    border-color: #1E6332;
    box-shadow: 0 0 0 2px rgba(30, 99, 50, 0.1);
}

.filter-select-full optgroup {
    font-weight: 600;
    color: #374151;
    background: #f9fafb;
}

.filter-select-full option {
    font-weight: normal;
    padding: 0.5rem;
}

/* Comprehensive Sort Section */
.filter-section-wide {
    grid-column: span 2;
}

@media (max-width: 1100px) {
    .filter-section-wide {
        grid-column: span 1;
    }
}

.filter-sort-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 500px) {
    .filter-sort-grid {
        grid-template-columns: 1fr;
    }
}

.sort-group label {
    display: block;
    font-size: 0.7rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.sort-group select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.8rem;
    background: #fff;
    cursor: pointer;
    color: #374151;
}

.sort-group select:focus {
    outline: none;
    border-color: #1E6332;
    box-shadow: 0 0 0 2px rgba(30, 99, 50, 0.1);
}

.sort-group select optgroup {
    font-weight: 600;
    color: #374151;
}

.sort-group select option {
    font-weight: normal;
    padding: 0.5rem;
}

.sort-quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sort-quick-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.55rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    font-size: 0.65rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sort-quick-btn:hover {
    background: #1E6332;
    border-color: #1E6332;
    color: #fff;
}

.sort-quick-btn.active {
    background: #1E6332;
    border-color: #1E6332;
    color: #fff;
}

.sort-quick-btn i {
    font-size: 0.6rem;
}

/* Filter Panel Actions - Fixed at bottom */
.filter-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.filter-panel-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-panel-btn.secondary {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #4b5563;
}

.filter-panel-btn.secondary:hover {
    background: #e5e7eb;
}

.filter-panel-btn.primary {
    background: linear-gradient(135deg, #1E6332 0%, #214A3E 100%);
    border: none;
    color: #fff;
}

.filter-panel-btn.primary:hover {
    background: linear-gradient(135deg, #214A3E 0%, #214A3E 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 99, 50, 0.3);
}

.claims-kpis-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

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

.claims-kpi-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.claims-kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

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

.claims-kpi-icon.total { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #4338ca; }
.claims-kpi-icon.funded { background: linear-gradient(135deg, #F4F0E9, #E8DFD0); color: #166534; }
.claims-kpi-icon.processing { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706; }
.claims-kpi-icon.value { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1d4ed8; }

.claims-kpi-content { display: flex; flex-direction: column; }
.claims-kpi-value { font-size: 1.5rem; font-weight: 700; color: #1f2937; }
.claims-kpi-label { font-size: 0.8rem; color: #6b7280; font-weight: 500; }

.claims-filter-bar {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
}

.claims-filter-group { display: flex; align-items: center; }

.claims-search-wrapper {
    position: relative;
    width: 280px;
}

.claims-search-wrapper i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.claims-search-input {
    width: 100%;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.claims-search-input:focus {
    outline: none;
    border-color: #1E6332;
    box-shadow: 0 0 0 4px rgba(30, 99, 50, 0.1);
}

.claims-filter-select {
    padding: 0.65rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 140px;
    transition: all 0.2s ease;
}

.claims-filter-select:focus {
    outline: none;
    border-color: #1E6332;
    box-shadow: 0 0 0 4px rgba(30, 99, 50, 0.1);
}

.claims-filter-actions {
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
}

.claims-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.25s ease;
}

.claims-action-btn:hover {
    background: linear-gradient(135deg, #F4F0E9, #F4F0E9);
    border-color: #1E6332;
    color: #1E6332;
    transform: translateY(-2px);
}

.claims-action-btn.primary {
    background: linear-gradient(135deg, #1E6332 0%, #214A3E 100%);
    border-color: transparent;
    color: #fff;
}

.claims-action-btn.primary:hover {
    background: linear-gradient(135deg, #214A3E 0%, #214A3E 100%);
    transform: translateY(-2px);
}

/* Both the list-view table container and the card/tile-view container
   get the identical bordered-card chrome so the beige header band sits
   at the top of a matching card in either mode. */
.claims-table-container,
.claims-cards-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 #e5e1da;
    overflow: visible;
}

/* Compact data-table header — unified pattern across Claims/Deceased/Drafts/
   Reports/E-Signatures. Previously used 1rem vertical padding + 1.1rem title +
   bulky pill, which made the header row ~60px tall and wasted vertical real
   estate. Compressed to ~38px while keeping the brand beige background. */
/* Shared header band — list view ("Claims Data") AND card/tile view
   ("Claims") render the identical beige band so the top of the table
   region looks the same in both modes. */
.claims-table-header,
.claims-cards-header {
    padding: 0.55rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F4F0E9;
    border-radius: 1rem 1rem 0 0;
}

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

.claims-table-info {
    font-size: 0.78rem;
    color: #166534;
    font-weight: 500;
    background: #fff;
    padding: 3px 10px;
    border-radius: 2rem;
}

.claims-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    padding-right: 0;
    /* Hide the native horizontal scrollbar — the sticky proxy scrollbars above
       and below are the visible ones. JS (initClaimsStickyScrollbar) syncs
       scrollLeft across all three so they stay in lockstep. */
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE/legacy Edge */
}
.claims-table-wrap::-webkit-scrollbar { display: none; }  /* Chrome / Safari / new Edge */

/* ============================================================
   FROZEN-HEADER VIEWPORT LOCK (desktop ≥769px)
   The page is viewport-locked in layout.css. Here we build the flex
   column so: filter toolbar (frozen top) → the active view (cards OR
   table, scrolls internally) → pagination (frozen bottom). The table's
   "Claims Data" band + the <thead> stay visible while 100 rows scroll;
   horizontal scroll still works because .claims-table-wrap is the single
   scroll viewport for both axes (.claims-table th already has
   position:sticky; top:0 from line ~2094, so it freezes automatically
   once the wrap is the vertical scroller).

   Mobile is intentionally excluded — it keeps the existing page-scroll
   card layout (mobile.css Section E). `.claims-content` becomes
   display:contents so the filter bar + cards-container + table-container
   + pagination all participate directly in the .claims-page flex column.
   Exactly one of cards-container / table-container is visible at a time
   (JS toggles inline display) so flex:1 lands on whichever is shown.
   ============================================================ */
@media (min-width: 769px) {
    .claims-page {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    /* Box-less: promote children into the .claims-page flex column */
    .claims-content { display: contents; }

    /* Frozen toolbar (always visible, natural height) */
    .claims-page .claims-filter-bar { flex: 0 0 auto; }

    /* Card view — scrolls internally when active. JS sets inline
       display:'' (→ this flex rule applies) or 'none' (→ hidden, inline
       wins, no flex participation). */
    /* flex: 0 1 auto (NOT 1 1) so the region sizes to its CONTENT when
       there are few rows — no tall dead white space inside the table.
       When rows overflow the available height, flex-shrink + min-height:0
       cap it to the viewport and the inner wrap scrolls. Best of both:
       compact with few rows, scrollable with many. */
    .claims-page .claims-cards-container {
        flex: 0 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .claims-page .claims-cards-header { flex: 0 0 auto; }
    .claims-page .claims-cards-grid {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* List/table view — the requested frozen-header region */
    .claims-page .claims-table-container {
        flex: 0 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .claims-page .claims-table-header { flex: 0 0 auto; }            /* frozen "Claims Data" band */

    /* The whole sticky-proxy scrollbar system (top + bottom green bars)
       was a workaround for the OLD model where the page scrolled and the
       native horizontal bar (at the bottom of a long table) was off-screen.
       Under the viewport lock the wrap is a FIXED-HEIGHT pane, so its OWN
       native horizontal scrollbar sits at the bottom of that pane and is
       always visible. The proxies are now pure redundancy and were the
       source of the persistent "double green line". Remove them entirely
       and let the wrap's native green scrollbars (both axes) do the work. */
    .claims-page .claims-sticky-scrollbar { display: none; }

    .claims-page .claims-table-wrap {
        flex: 1 1 auto;
        min-height: 0;
        /* Single scroll viewport, both axes. `scroll` keeps the bars
           reserved so the layout doesn't jump as row/column count changes.
           Native bars only — no proxy = no double line. The sticky <thead>
           freezes because this wrap is the vertical scroller. */
        overflow-x: scroll;
        overflow-y: scroll;
        scrollbar-width: thin;                       /* Firefox */
        scrollbar-color: #2F8542 transparent;        /* Firefox: green thumb */
        -ms-overflow-style: auto;
    }
    /* WebKit: re-enable BOTH native scrollbars (the base rule at line
       ~2061 hid them with display:none) and brand them green. One green
       horizontal bar at the bottom of the fixed pane, one green vertical
       bar on the right — exactly what the user asked for, no doubles. */
    .claims-page .claims-table-wrap::-webkit-scrollbar {
        display: block;
        width: 12px;
        height: 12px;
    }
    .claims-page .claims-table-wrap::-webkit-scrollbar-track {
        background: #f1efe9;
    }
    .claims-page .claims-table-wrap::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #2F8542 0%, #1E6332 100%);
        border-radius: 6px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    .claims-page .claims-table-wrap::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #1E6332 0%, #214A3E 100%);
        background-clip: padding-box;
    }
    .claims-page .claims-table-wrap::-webkit-scrollbar-corner {
        background: #f1efe9;
    }

    /* Pagination: compact and hugging the bottom edge. The gap below the
       table (pagination height + page bottom padding) is tuned to mirror
       the gap ABOVE the table (filter bar's 0.6rem margin-bottom), so the
       table sits symmetrically between the toolbar and the page edge. */
    .claims-page .claims-pagination-bar {
        flex: 0 0 auto;
        padding: 0.4rem 1.25rem;
        margin-top: 0.6rem;            /* matches filter-bar → table gap */
    }
    /* Tighten the page's bottom padding so pagination sits near the edge,
       mirroring the tight 0.5rem top padding. */
    #page-claims.active .dashboard-content.claims-page {
        padding-bottom: 0.5rem;
    }
}

/* Sticky horizontal scrollbar proxy */
.claims-sticky-scrollbar {
    position: sticky;
    bottom: 0;
    z-index: 13;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
.claims-top-scrollbar {
    position: sticky;
    top: 0;
    bottom: auto;
    border-top: none;
    border-bottom: 1px solid #e2e8f0;
}

.claims-scrollbar-inner {
    overflow-x: auto;
    overflow-y: hidden;
}

.claims-scrollbar-spacer {
    height: 1px;
}

.claims-table {
    /* Width is driven by _applyClaimsColumnWidths() (JS): the table fills the
       available center width and only grows past it (scrolling) when the columns
       genuinely don't fit. No forced min-width here — that used to pin the table
       to 1500px+ and inflate every column, causing permanent horizontal scroll. */
    min-width: 0;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.claims-table th {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 8px 12px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.claims-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    white-space: nowrap;
    /* Universal truncation guard — long content (long claim names, FH Rep notes,
       insurance company full names) clip with ellipsis instead of overflowing
       and visually stacking on top of the next column. Each cell respects the
       column width set by _applyClaimsColumnWidths(). */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cells that host an absolute-positioned hover popover (Net Amount, Attention
   Needed) must NOT clip their overflow — otherwise the popover gets chopped at
   the cell boundary and shows nothing on hover. Content in these cells is always
   short (one amount, one icon) so disabling overflow:hidden here can't cause
   the text-overlap regression the rest of the fix prevents. */
.claims-table td.claims-cell-popover {
    overflow: visible !important;
}

/* Visible gutter before the Actions column so it reads as a SEPARATE
   floating panel pinned to the right — not just another table column.
   The whitespace + the panel's strong left shadow/border (see
   .claims-sticky-action below) sells the "outside the table" look. */
.claims-table th:nth-last-child(2),
.claims-table td:nth-last-child(2) { padding-right: 28px !important; }

/* Sticky Actions column fallback only. The ACTUAL styling (beige panel +
   the always-visible left divider) lives in the `.claims-sticky-action`
   rule further down — that class is added to the actions th/td in
   claims.js (col.sticky) and is more specific, so it wins. This
   :last-child block is just a harmless fallback. */
.claims-table th:last-child,
.claims-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 11;
    background: #fff;
    box-shadow: -4px 0 8px rgba(0,0,0,0.06);
}

.claims-table th:last-child {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    z-index: 12;
}

.claims-table tbody tr:hover td:last-child {
    background: linear-gradient(135deg, #F4F0E9 0%, #f8fafc 100%);
}

/* Sortable column headers */
.claims-sortable-th {
    cursor: pointer;
    user-select: none;
}
.claims-sortable-th:hover {
    color: #1E6332;
    background: linear-gradient(135deg, #F4F0E9 0%, #F4F0E9 100%);
}
.claims-sort-indicator {
    display: inline-block;
    width: 14px;
    font-size: 0.65rem;
    opacity: 0.35;
    vertical-align: middle;
    margin-left: 2px;
}
.claims-sort-indicator::after {
    content: '▲▼';
}
.claims-sort-indicator.asc::after {
    content: '▲';
    opacity: 1;
}
.claims-sort-indicator.desc::after {
    content: '▼';
    opacity: 1;
}
.claims-sort-indicator.asc,
.claims-sort-indicator.desc,
.claims-sort-indicator.active {
    color: #1E6332;
    opacity: 1;
}
.claims-sort-indicator.active::after {
    content: '▼';
}

.claims-table tbody tr {
    transition: all 0.2s ease;
    cursor: pointer;
}

.claims-table tbody tr:hover {
    background: linear-gradient(135deg, #F4F0E9 0%, #f8fafc 100%);
}

.claims-table .claim-id-link {
    color: #1E6332;
    font-weight: 600;
    text-decoration: none;
}

.claims-table .claim-id-link:hover {
    text-decoration: underline;
}

.claims-table .compact-cell {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.claims-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: #f8fafc;
    border-radius: 0 0 1rem 1rem;
    gap: 1rem;
}

.claims-per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #6b7280;
    white-space: nowrap;
}

.claims-per-page select {
    padding: 0.3rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #374151;
    background: #fff;
    cursor: pointer;
    outline: none;
}

.claims-per-page select:focus {
    border-color: #1E6332;
    box-shadow: 0 0 0 2px rgba(30, 99, 50, 0.15);
}

.claims-pagination-nav {
    flex: 1;
}

.claims-pagination-nav .pagination {
    margin: 0;
}

.claims-pagination-nav .page-link {
    color: #1E6332;
    border-color: #d1d5db;
}

.claims-pagination-nav .page-link:hover {
    background: #e8f5e9;
    color: #146c43;
    border-color: #1E6332;
}

.claims-pagination-nav .page-item.active .page-link {
    background: #1E6332;
    border-color: #1E6332;
    color: #fff;
}

.claims-pagination-nav .page-item.disabled .page-link {
    color: #adb5bd;
}

/* ==================== CONTENT SPINNER (shared: claims + deceased) ==================== */
.content-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    grid-column: 1 / -1; /* span full grid width */
    min-height: 200px;
}

.content-spinner-icon {
    width: 48px;
    height: 48px;
    border: 3px solid #e9ecef;
    border-top-color: #1E6332;
    border-radius: 50%;
    animation: progressSpin 0.8s linear infinite;
}

.content-spinner-text {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
}

/* Table spinner row */
.table-spinner-row td {
    text-align: center;
    padding: 3rem 1rem !important;
}

.table-spinner-row .content-spinner {
    padding: 2rem 1rem;
    min-height: auto;
}

/* Inline "still loading" banner — shown below cards while a data stream is in-flight */
.data-still-loading-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    margin-top: 0.75rem;
    background: #F4F0E9;
    border: 1px solid #c3e6cb;
    border-radius: 0.5rem;
    color: #1E6332;
    font-size: 0.85rem;
    font-weight: 500;
}

.data-still-loading-banner .sidebar-link-spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
    position: static;
    margin: 0;
}

/* Claims & Reports Tabs */
.claims-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.25rem;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.04);
    width: fit-content;
}

.claims-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.25s ease;
}

.claims-tab:hover {
    color: #1E6332;
    background: rgba(30, 99, 50, 0.05);
}

.claims-tab.active {
    background: linear-gradient(135deg, #1E6332 0%, #214A3E 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(30, 99, 50, 0.3);
}

.claims-tab i {
    font-size: 1rem;
}

.claims-tab-content {
    display: none;
}

.claims-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Reports KPIs Grid */
.reports-kpis-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.reports-kpis-grid.financial-grid {
    grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 1400px) { .reports-kpis-grid.financial-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1200px) { .reports-kpis-grid { grid-template-columns: repeat(2, 1fr); } .reports-kpis-grid.financial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .reports-kpis-grid { grid-template-columns: 1fr; } .reports-kpis-grid.financial-grid { grid-template-columns: 1fr; } }

.reports-kpi-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.reports-kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.reports-kpi-icon {
    width: 50px;
    height: 50px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #4338ca;
}

.reports-kpi-card.success .reports-kpi-icon { background: linear-gradient(135deg, #F4F0E9, #E8DFD0); color: #166534; }
.reports-kpi-card.info .reports-kpi-icon { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1d4ed8; }
.reports-kpi-card.warning .reports-kpi-icon { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706; }

.reports-kpi-content { display: flex; flex-direction: column; }
.reports-kpi-value { font-size: 1.5rem; font-weight: 700; color: #1f2937; }
.reports-kpi-label { font-size: 0.8rem; color: #6b7280; font-weight: 500; }

/* Reports Charts */
.reports-charts-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 992px) { .reports-charts-row { grid-template-columns: 1fr; } }

.reports-chart-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
}

.reports-chart-card.full-width {
    margin-bottom: 1.5rem;
}

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

.reports-chart-header h5 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #166534;
}

.chart-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #6b7280;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-dot.funded { background: #18A74B; }
.legend-dot.processing { background: #f59e0b; }
.legend-dot.closed { background: #3b82f6; }

.reports-chart-body {
    padding: 1.25rem;
}

/* Reports Data Section */
.reports-data-section {
    background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.04);
}

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

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

.column-manager {
    position: relative;
}

.reports-action-btn.small {
    padding: 0.5rem 0.85rem;
    font-size: 0.8rem;
}

.column-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    padding: 0.75rem;
    min-width: 180px;
    z-index: 100;
}

.column-dropdown.show {
    display: block;
}

.column-dropdown label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 0.25rem;
}

.column-dropdown label:hover {
    background: #f3f4f6;
}

.reports-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.reports-detail-table th {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.reports-detail-table th.sortable {
    cursor: pointer;
    transition: background 0.2s ease;
}

.reports-detail-table th.sortable:hover {
    background: #e2e8f0;
}

.reports-detail-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.reports-detail-table tbody tr {
    transition: all 0.2s ease;
    cursor: pointer;
}

.reports-detail-table tbody tr:hover {
    background: linear-gradient(135deg, #F4F0E9 0%, #f8fafc 100%);
}

.reports-table-footer {
    padding: 1rem 1.25rem;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.reports-footer-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.reports-showing {
    font-size: 0.8rem;
    color: #6b7280;
}

.reports-per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.reports-per-page select {
    padding: 0.25rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.8rem;
    background: #fff;
    cursor: pointer;
}

.reports-per-page select:focus {
    outline: none;
    border-color: #1E6332;
}

/* Dynamic Chart Styles */
.simple-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 180px;
    padding: 0 10px;
}

.bar-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 80px;
}

.bar-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.bar {
    width: 40px;
    min-height: 10px;
    border-radius: 4px 4px 0 0;
    transition: height 0.5s ease;
}

.bar-label {
    font-size: 0.7rem;
    color: #6b7280;
    margin-top: 0.5rem;
    text-align: center;
}

.donut-chart-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.5rem;
}

.donut-chart {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.donut-total {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
}

.donut-label {
    font-size: 0.65rem;
    color: #6b7280;
}

.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-name {
    color: #374151;
    flex: 1;
    min-width: 80px;
}

.legend-count {
    font-weight: 600;
    color: #1f2937;
}

.trend-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 130px;
    padding: 0 5px;
}

.trend-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.trend-bar-stack {
    width: 20px;
    display: flex;
    flex-direction: column;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    min-height: 5px;
}

.trend-segment {
    min-height: 0;
}

.trend-segment.funded { background: #18A74B; }
.trend-segment.processing { background: #f59e0b; }
.trend-segment.closed { background: #3b82f6; }

.trend-label {
    font-size: 0.65rem;
    color: #6b7280;
    margin-top: 0.35rem;
}

/* Mini badges for reports */
.mini-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.mini-badge.funded { background: #e7f0ea; color: #1e6332; }
.mini-badge.processing { background: #f6efe4; color: #8a6536; }
.mini-badge.closed { background: #eceeef; color: #475453; }
.mini-badge.withdrawn { background: #fbe9e9; color: #b00000; }

/* ==================== REVIEW & SUBMIT (Step 5) ==================== */
.review-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.review-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #f8faf9;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    color: #1a1a1a;
    font-size: 0.95rem;
}

.review-edit-link {
    font-size: 0.8rem;
    font-weight: 500;
    color: #1E6332;
    cursor: pointer;
    text-decoration: none;
}

.review-edit-link:hover {
    text-decoration: underline;
    color: #214A3E;
}

.review-section-body {
    padding: 1rem;
}

.review-item {
    padding: 0.25rem 0;
    font-size: 0.9rem;
    color: #374151;
}

/* Review step number badge */
.review-step-badge {
    font-size: 0.65rem;
    font-weight: 600;
    color: #94a3b8;
    background: #e2e8f0;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 6px;
}

.review-section-body .table {
    font-size: 0.85rem;
}

/* Financial breakdown + summary styles → shared in create-claim-v2.css (.fp-bd-*, .fp-fs-*) */

.classic-info-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.4;
    margin-bottom: 4px;
}

.classic-info-note i {
    color: #1E6332;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Family Pay chip styles → shared in create-claim-v2.css (.fp-promo-*, .fp-chip*) */

.classic-action-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.classic-action-buttons .btn {
    flex: 1;
    min-width: 200px;
    padding: 10px 20px;
    font-weight: 500;
    border-radius: 8px;
}

/* === Policy Completeness Checklist === */
.policy-checklist {
    background: #fffbeb;
    border: 1.5px solid #f59e0b;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.policy-checklist.complete {
    background: #F4F0E9;
    border-color: #18A74B;
}

.policy-checklist-header {
    margin-bottom: 10px;
}

.policy-checklist-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.policy-checklist-label {
    font-weight: 600;
    font-size: 0.82rem;
    color: #1f2937;
}

.policy-checklist-progress {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

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

.policy-checklist-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #18A74B);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.policy-checklist.complete .policy-checklist-bar-fill {
    background: #18A74B;
}

.policy-checklist-hint {
    font-size: 0.74rem;
    color: #6b7280;
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 8px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
}

.policy-checklist-hint i {
    color: #3b82f6;
    margin-right: 4px;
    font-style: normal;
}

.policy-checklist-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.8rem;
    line-height: 1.3;
}

.policy-checklist-row.provided i {
    color: #18A74B;
    font-size: 0.82rem;
}

.policy-checklist-row.provided span {
    color: #374151;
}

.policy-checklist-row.missing i {
    color: #f59e0b;
    font-size: 0.82rem;
}

.policy-checklist-row.missing span {
    color: #92400e;
    font-weight: 500;
}

/* === Policy Warning Badge (on cards + review headers) === */
.policy-warn-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: default;
    white-space: nowrap;
    vertical-align: middle;
}

.policy-warn-badge i {
    font-size: 0.7rem;
    color: #f59e0b;
}

.policy-warn-badge.review {
    padding: 3px 10px;
    font-size: 0.76rem;
    margin-left: 4px;
}

/* === Policy Tooltip (hover popover) === */
.policy-tooltip {
    position: fixed;
    z-index: 99999;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
    display: none;
    width: 320px;
    max-height: 80vh;
    overflow-y: auto;
}

.policy-tooltip .policy-checklist {
    margin-bottom: 12px;
}

.policy-tooltip .policy-checklist:last-child {
    margin-bottom: 0;
}

/* === Live Policy Checklist (inline form) === */
.policy-live-checklist {
    margin: 16px 0 8px;
}

.policy-live-checklist .policy-checklist {
    margin-bottom: 0;
}

/* === Unsaved Changes Modal === */
.draft-unsaved-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: draftFadeIn 0.2s ease;
}

@keyframes draftFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.draft-unsaved-modal {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: draftScaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes draftScaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.draft-unsaved-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fef3c7;
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 16px;
}

.draft-unsaved-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.draft-unsaved-text {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 24px;
}

.draft-unsaved-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.draft-unsaved-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}

.draft-unsaved-btn-save {
    background: #1E6332;
    color: #fff;
}

.draft-unsaved-btn-save:hover {
    background: #214A3E;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 99, 50, 0.3);
}

.draft-unsaved-btn-discard {
    background: #fee2e2;
    color: #dc2626;
}

.draft-unsaved-btn-discard:hover {
    background: #fecaca;
}

.draft-unsaved-btn-cancel {
    background: #f1f5f9;
    color: #475569;
}

.draft-unsaved-btn-cancel:hover {
    background: #e2e8f0;
}

/* === Classic Submission Warning === */

.review-section-body .table th {
    font-weight: 600;
    color: #6b7280;
    border-bottom: 2px solid #e5e7eb;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.review-section-body .table td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}

/* ============================================================================
   CLAIMS — Toolbar actions (Export, Columns, Saved Filters)
   Shares visual language with the existing reports.css .reports-action-btn
   ============================================================================ */

.claims-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: #fff;
    color: #374151;
    border: 1px solid #e5e1da;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.claims-action-btn:hover {
    background: #F4F0E9;
    border-color: #C5BCA2;
    color: #1E6332;
}
.claims-action-btn.primary {
    background: #1E6332;
    color: #fff;
    border-color: #1E6332;
}
.claims-action-btn.primary:hover {
    background: #214A3E;
    border-color: #214A3E;
    color: #fff;
}
.claims-action-btn i { font-size: 12px; }

/* ============================================================================
   Claims filter bar — deliberate two-zone layout:
     LEFT  zone: search / view / sort / locations / status chips
     RIGHT zone: saved-filters / columns / export buttons
   The OUTER row never wraps. If the LEFT zone runs out of horizontal room,
   chips wrap WITHIN it (so trailing actions never get pushed to a new line).
   ============================================================================ */
.claims-single-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    /* Take a full row inside the (wrap-enabled) .claims-filter-bar so the
       bar-left zone has the maximum horizontal space to lay out its chips. */
    flex: 1 1 100%;
    min-width: 0;
}
.claims-bar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0; /* allow chips to wrap instead of forcing horizontal scroll */
}
.claims-single-row .filter-search-box {
    flex: 1 1 220px;
    min-width: 180px;
    max-width: 320px;
}
.claims-single-row .view-toggle-group,
.claims-single-row .sort-control,
.claims-single-row .claims-loc-filter { flex: 0 0 auto; }

/* Shrink quick-filter chips slightly so all 4 + location + trailing fit on one row */
.claims-single-row .quick-filter-chip {
    flex: 0 0 auto;
    padding: 5px 10px;
    font-size: 12px;
    height: 30px;
}

/* Spacer (legacy — no longer needed with the left/right zone split, but kept
   in case any code path still relies on it; it's a flex item with zero basis
   so it's effectively invisible.) */
.claims-row-spacer { flex: 1 1 0; min-width: 0; }

/* Trailing-actions cluster (Saved Filters / Columns / Export) — pinned to
   the top-right of the bar. Never wraps below the left zone because it's
   a flex sibling of `.claims-bar-left` inside a nowrap container. */
.claims-trailing-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    align-self: flex-start;
    /* Visual delimiter — subtle vertical line to the LEFT of the action group
       so it reads as a deliberate separate zone, not just floating buttons. */
    padding-left: 12px;
    margin-left: 4px;
    border-left: 1px solid #e5e1da;
}

/* Compact the action buttons on the trailing side (Saved / Columns / Export) */
.claims-single-row .claims-action-btn {
    padding: 5px 10px;
    font-size: 12px;
    height: 30px;
}
.claims-action-chevron { font-size: 9px !important; margin-left: 2px; opacity: 0.7; }

/* Icon-only variants on narrower viewports — labels collapse to reclaim horizontal space */
@media (max-width: 1400px) {
    .claims-single-row .claims-action-label { display: none; }
    .claims-single-row .claims-action-btn { padding: 5px 9px; gap: 0; }
    .claims-single-row .claims-action-btn .claims-saved-count-badge { margin-left: 4px; }
    .claims-single-row .claims-action-chevron { display: none; }
    .claims-single-row .sort-trigger-btn .sort-chevron { display: none; }
}
@media (max-width: 1200px) {
    /* Chips shrink further on tight screens */
    .claims-single-row .quick-filter-chip { padding: 4px 8px; font-size: 11.5px; }
    .claims-single-row .quick-filter-chip .chip-count { margin-left: 3px; }
    .claims-single-row .sort-trigger-btn { padding: 5px 8px; }
    .claims-single-row .sort-trigger-btn #currentSortLabel { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}


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

/* --- Saved Filters dropdown (toolbar bookmark menu) ---
   Positioned with `position: fixed` so it escapes any parent `overflow: hidden`
   or sticky-context clipping (e.g. when the trailing actions wrap to a second
   row on the LEFT side of the toolbar — the old `position: absolute; right: 0`
   would extend the dropdown LEFT of the viewport, getting clipped by the
   sidebar). Actual coordinates are computed in JS via getBoundingClientRect()
   and clamped to viewport edges. See toggleSavedFiltersMenu() in claims-filters.js. */
.claims-saved-filter-menu { position: relative; align-items: center; }

.claims-saved-filter-dropdown {
    position: fixed;
    top: 0;        /* will be overridden by JS */
    left: 0;       /* will be overridden by JS */
    width: 340px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    border: 1px solid #e5e1da;
    z-index: 1100; /* above sticky filter bar (z:100) and any other floating UI */
    display: none;
    max-height: 480px;
    overflow: hidden;
    flex-direction: column;
}
.claims-saved-filter-dropdown.show { display: flex; }

.claims-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;
}
.claims-saved-filter-close {
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 13px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.claims-saved-filter-close:hover { background: #F4F0E9; color: #231F20; }

.claims-saved-filter-body { flex: 1; overflow-y: auto; padding: 6px; }
.claims-saved-filter-footer {
    padding: 10px 12px;
    border-top: 1px solid #eee7d9;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* "Update <name>" button — appears stacked above "Save as New Filter" when a
   saved filter is active. Amber background to distinguish "modify in place"
   from the green "save new" action. */
.claims-update-filter-btn {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
    font-weight: 600;
}
.claims-update-filter-btn:hover {
    background: #d97706;
    border-color: #d97706;
    color: #fff;
}
/* Dirty state — pulsing ring + brighter background when the user has
   modified filters since applying. Visual cue that there are unsaved
   changes worth committing. */
.claims-update-filter-btn-dirty {
    background: #1E6332;
    border-color: #1E6332;
    box-shadow: 0 0 0 0 rgba(30, 99, 50, 0.45);
    animation: claimsUpdateBtnPulse 1.8s ease-in-out infinite;
}
.claims-update-filter-btn-dirty:hover {
    background: #214A3E;
    border-color: #214A3E;
}
@keyframes claimsUpdateBtnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30, 99, 50, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(30, 99, 50, 0); }
}

/* In-dropdown save prompt (replaces the "Save Current View" button when
   triggered, so the prompt is contained inside the dropdown popup instead
   of spilling into the toolbar as a new wrapped row). */
.claims-saved-filter-prompt {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #fff;
    border: 1.5px solid #1E6332;
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12);
}
.claims-saved-filter-prompt > i.fas.fa-bookmark {
    color: #1E6332;
    font-size: 12px;
    flex-shrink: 0;
}
.claims-saved-filter-prompt input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    padding: 4px 0;
    background: transparent;
    font-family: inherit;
    min-width: 0;
}
.claims-saved-filter-prompt input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}
.claims-saved-filter-confirm,
.claims-saved-filter-cancel {
    background: transparent;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}
.claims-saved-filter-confirm { color: #1E6332; }
.claims-saved-filter-confirm:hover { background: #F4F0E9; }
.claims-saved-filter-cancel { color: #9ca3af; }
.claims-saved-filter-cancel:hover { background: #fee2e2; color: #dc2626; }

.claims-saved-filter-empty {
    padding: 24px 14px;
    text-align: center;
    color: #6b7280;
}
.claims-saved-filter-empty i {
    font-size: 24px;
    color: #C5BCA2;
    display: block;
    margin-bottom: 8px;
}
.claims-saved-filter-empty strong {
    display: block;
    color: #231F20;
    margin-bottom: 4px;
    font-size: 13px;
}

.claims-saved-filter-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease;
    border: 1px solid transparent;
}
.claims-saved-filter-item:hover { background: #F4F0E9; border-color: #eee7d9; }
/* Active state — much more visible. Solid green left bar + soft beige bg
   so users can instantly tell which saved filter is currently "in view". */
.claims-saved-filter-item.active {
    background: #E8DFD0;
    border-color: #C5BCA2;
    box-shadow: inset 4px 0 0 0 #1E6332;
    padding-left: 16px;
}
.claims-saved-filter-item.active .claims-sf-icon { color: #1E6332; }
.claims-saved-filter-item.active .claims-sf-name {
    color: #1E6332;
    font-weight: 700;
}
.claims-saved-filter-item .claims-sf-icon {
    color: #1E6332;
    font-size: 14px;
    flex-shrink: 0;
}
.claims-saved-filter-item .claims-sf-text { flex: 1; min-width: 0; }
.claims-saved-filter-item .claims-sf-name {
    font-weight: 600;
    font-size: 13px;
    color: #231F20;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.claims-saved-filter-item .claims-sf-summary {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.claims-saved-filter-item .claims-sf-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.claims-saved-filter-item .claims-sf-delete,
.claims-saved-filter-item .claims-sf-edit,
.claims-saved-filter-item .claims-sf-resave {
    background: transparent;
    border: none;
    color: #C5BCA2;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 11px;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.15s ease;
}
.claims-saved-filter-item:hover .claims-sf-delete,
.claims-saved-filter-item:hover .claims-sf-edit,
.claims-saved-filter-item:hover .claims-sf-resave { opacity: 1; }
.claims-saved-filter-item .claims-sf-edit:hover   { background: #F4F0E9; color: #1E6332; }
.claims-saved-filter-item .claims-sf-delete:hover { background: #fee2e2; color: #dc2626; }

/* Re-save button — appears ONLY on the active+modified saved-filter row.
   Prominent green by default (always visible, not hover-faded) since it
   represents an action the user is mid-flow doing — and a subtle pulse so
   they can spot it. Distinct from the rename pencil + delete × on the same
   row, which stay subtle until hover. */
.claims-saved-filter-item .claims-sf-resave {
    color: #fff;
    background: #1E6332;
    opacity: 1;          /* always visible on the row that has it */
    padding: 5px 8px;
    box-shadow: 0 0 0 0 rgba(30, 99, 50, 0.45);
    animation: claimsResaveBtnPulse 1.8s ease-in-out infinite;
}
.claims-saved-filter-item .claims-sf-resave:hover {
    background: #214A3E;
    transform: scale(1.06);
}
@keyframes claimsResaveBtnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30, 99, 50, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(30, 99, 50, 0); }
}

/* "modified" tag next to the active+dirty filter's name — small caps pill. */
.claims-saved-filter-item .claims-sf-modified-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    line-height: 1.4;
}

/* Soft amber bg on the active+modified row so it visually stands out */
.claims-saved-filter-item.has-changes {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.06) 0%, rgba(245, 158, 11, 0) 100%);
}

/* Inline rename input — replaces the name span when user clicks the pencil */
.claims-sf-rename-input {
    border: 1.5px solid #1E6332;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1E6332;
    background: #fff;
    outline: none;
    width: 100%;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12);
    font-family: inherit;
}

/* Inline save-filter name prompt */
.saved-filter-prompt-row {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin-top: 8px;
    background: #F4F0E9;
    border: 1px solid #C5BCA2;
    border-radius: 6px;
}
.saved-filter-prompt-row .saved-filter-prompt-icon {
    color: #1E6332;
    font-size: 13px;
    flex-shrink: 0;
}
.saved-filter-prompt-row input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #e5e1da;
    border-radius: 5px;
    font-size: 13px;
    outline: none;
}
.saved-filter-prompt-row input:focus {
    border-color: #1E6332;
    box-shadow: 0 0 0 2px rgba(30, 99, 50, 0.12);
}
.saved-filter-prompt-row .saved-filter-confirm-btn,
.saved-filter-prompt-row .saved-filter-cancel-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    width: 28px; height: 28px;
    cursor: pointer;
    font-size: 11.5px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.12s ease;
}
.saved-filter-prompt-row .saved-filter-confirm-btn {
    background: #1E6332;
    color: #fff;
}
.saved-filter-prompt-row .saved-filter-confirm-btn:hover { background: #214A3E; }
.saved-filter-prompt-row .saved-filter-cancel-btn { color: #6b7280; }
.saved-filter-prompt-row .saved-filter-cancel-btn:hover {
    background: #fee2e2; color: #dc2626; border-color: #fecaca;
}

/* ============================================================================
   CLAIMS TABLE — Net Amount hover popover, Attention dot, Compact actions,
                  Sticky Actions column, Drag-reorder
   ============================================================================ */

.claims-net-cell {
    position: relative;
    display: inline-block;
    cursor: help;
}
/* Same stacking-context escape as .claims-att-cell — lift above sticky thead
   (z-index 10) and sticky top scrollbar (z-index 13) on hover. */
.claims-net-cell:hover,
.claims-net-cell:focus,
.claims-net-cell:focus-within {
    z-index: 9999;
}
.claims-net-cell .claims-net-value {
    font-weight: 700;
    color: #2F8542;
    border-bottom: 1px dotted rgba(30, 99, 50, 0.3);
    transition: border-color 0.15s ease;
}
.claims-net-cell:hover .claims-net-value,
.claims-net-cell:focus .claims-net-value { border-bottom-color: #1E6332; }
.claims-net-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 100;
    background: #fff;
    border: 1px solid #e5e1da;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    padding: 12px 14px;
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease 0.25s, transform 0.18s ease 0.25s, visibility 0s linear 0.45s;
    pointer-events: none;
    text-align: left;
    font-size: 12.5px;
    color: #231F20;
}
/* Shown ONLY when JS portals it to <body> (_netShow) so it escapes the claims
   table's overflow clip — a plain absolute popover gets cut off near the table
   edges. _netPlace sets position:fixed + left/top inline. */
.claims-net-popover.is-net-portaled {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    z-index: 10500;
    transition: opacity 0.14s ease;
}
.claims-net-popover-head {
    display: flex; align-items: center; gap: 6px;
    font-weight: 700;
    color: #1E6332;
    font-size: 13px;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid #eee7d9;
}
.claims-net-popover-sub {
    font-size: 11.5px;
    color: #6b7280;
    margin-bottom: 8px;
    line-height: 1.4;
}
.claims-net-popover-row {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 4px 0;
    font-variant-numeric: tabular-nums;
}
.claims-net-popover-section {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9a8f7d;
    padding: 7px 0 2px;
    margin-top: 3px;
    border-top: 1px solid #eee7d9;
}
.claims-net-popover-section:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.claims-net-popover-row > span { white-space: nowrap; }
.claims-net-popover-row.fp strong,
.claims-net-popover-row.net strong { white-space: nowrap; }
.claims-net-popover-row.minus strong { color: #6b7280; }
.claims-net-popover-row.fp strong { color: #1E6332; }
.claims-net-popover-row.net {
    border-top: 1px solid #eee7d9;
    margin-top: 6px;
    padding-top: 8px;
    font-weight: 700;
}
.claims-net-popover-row.net span { color: #1E6332; }
.claims-net-popover-row.net strong { color: #2F8542; font-size: 14px; }

/* Attention Needed indicator — red pulsing dot with hover-reveal styled popover */
.claims-att-cell {
    position: relative;
    display: inline-block;
    cursor: help;
}
/* When hovering the attention cell, elevate its stacking context so the
   popover renders above the sticky table thead (z-index 10) and above the
   sticky top horizontal scrollbar (z-index 13). Without this, the parent
   .claims-att-cell creates a z-index:auto stacking context that confines the
   popover's z-index:1000 to compete only with its siblings inside that
   context — useless against the root-level thead. */
.claims-att-cell:hover,
.claims-att-cell:focus,
.claims-att-cell:focus-within {
    z-index: 9999;
}
.claims-att-dot {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
    animation: claimsAttPulse 2.2s ease-in-out infinite;
}
.claims-att-none {
    color: #C5BCA2;
    font-size: 13px;
}
@keyframes claimsAttPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18); }
    50%      { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.08); }
}

/* Attention Needed — styled hover popover (replaces native title tooltip).
   Sizing: width hugs content (min 360px, capped at 90vw / 720px) so short
   content gets a tight card and long content expands. max-height: viewport
   minus some padding so tall content scrolls VERTICALLY only. Overflow-x:
   hidden + word-break: break-word on the body ensures zero horizontal scroll. */
.claims-att-popover {
    /* Positioning is JS-driven (position: fixed, set inline by
       _wireAttentionPopovers) so the popover escapes the table's scroll
       overflow. These CSS values are the pre-hover fallback only. */
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    z-index: 1000;
    /* Fixed comfortable card width so long document descriptions WRAP
       cleanly inside a bordered card instead of sprawling to 700px+ and
       getting clipped by overflow-x. Predictable width also means the JS
       placement math (offsetWidth) is exact. */
    width: 420px;
    max-width: 92vw;
    max-height: calc(100vh - 80px);
    overflow: hidden auto;
    background: #fff;
    border: 1px solid #d8d2c6;
    border-left: 4px solid #dc2626;
    border-radius: 10px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 16px 40px rgba(33, 74, 62, 0.18);
    padding: 0;
    text-align: left;
    font-size: 12.5px;
    color: #231F20;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease 0.25s, transform 0.18s ease 0.25s, visibility 0s linear 0.45s;
    pointer-events: none;
}
.claims-att-cell:hover .claims-att-popover,
.claims-att-cell:focus .claims-att-popover,
.claims-att-popover:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
    transition: opacity 0.18s ease 0s, transform 0.18s ease 0s, visibility 0s linear 0s;
}

/* Portaled state — the popover has been moved to <body> by
   _wireAttentionPopovers so it escapes every stacking context. JS sets the
   fixed position inline; this class forces it visible (the in-cell :hover
   selectors no longer apply once it's a body child) and lifts it above
   ALL app chrome with a professional bordered card + layered shadow. */
.claims-att-popover.is-att-portaled {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    z-index: 100000;            /* above sticky thead/scrollbar, below toasts */
    border: 1px solid #d8d2c6;
    border-left: 4px solid #dc2626;
    border-radius: 10px;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08),
        0 12px 28px rgba(33, 74, 62, 0.16),
        0 24px 56px rgba(0, 0, 0, 0.16);
    transition: opacity 0.16s ease;
}
.claims-att-popover-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #fef2f2, #fef7f7);
    border-bottom: 1px solid #fecaca;
    color: #dc2626;
    font-weight: 700;
    font-size: 13px;
    position: sticky;
    top: 0;
}
.claims-att-popover-head i { font-size: 13px; }
/* Decedent + DOD line under the "Actions Required" head — mirrors the legacy
   Hub modal. Name in dark bold, DOD muted. */
.claims-att-popover-sub {
    padding: 9px 14px;
    border-bottom: 1px solid #F4F0E9;
    font-size: 12.5px;
    line-height: 1.4;
    color: #6b7280;
}
.claims-att-popover-sub strong { color: #1f2937; font-weight: 700; }

.claims-att-section {
    padding: 10px 14px;
    border-bottom: 1px solid #F4F0E9;
}
.claims-att-section:last-child { border-bottom: 0; }
.claims-att-section-head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #1E6332;
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}
.claims-att-section-head i { font-size: 11px; color: #C19A6B; }
/* Instruction sentence above the Verification Requirements list
   ("The following items are needed in order to complete the verification process.") */
.claims-att-section-intro {
    font-size: 12.5px;
    line-height: 1.5;
    color: #374151;
    font-weight: 600;
    margin-bottom: 8px;
}
.claims-att-section-body {
    font-size: 12.5px;
    line-height: 1.55;
    color: #374151;
    /* Ensure long single tokens (URLs, hyphenated phrases) wrap instead of
       overflowing the popover horizontally. */
    word-break: break-word;
    overflow-wrap: anywhere;
}
.claims-att-line { margin: 2px 0; }
.claims-att-bullet {
    position: relative;
    padding-left: 14px;
    margin: 3px 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.claims-att-bullet::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #dc2626;
}

/* Narrow-viewport width trim only. Positioning + left/right flipping is
   fully JS-driven now (_wireAttentionPopovers sets position: fixed with
   computed coords + clamps to the viewport), so no CSS position overrides
   are needed here — they'd just fight the inline styles. */
@media (max-width: 768px) {
    .claims-att-popover {
        width: 320px;
        max-width: 92vw;
    }
}

/* Compact Actions column */
.claims-actions-compact {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}
/* The attention dot is a status indicator, not an action — give it extra
   breathing room and a hairline divider so it reads as separate from the
   action buttons that follow it. Only applies when the dot is actually
   present (clean claims render no .claims-att-cell at all). */
.claims-actions-compact > .claims-att-cell {
    margin-right: 6px;
    padding-right: 8px;
    border-right: 1px solid #d8d2c6;
}
.claims-icon-btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #475453;
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.12s ease;
}
/* Disabled Edit affordance — dimmed + not-allowed, but KEEPS pointer events so
   the native title tooltip (explaining why it can't be edited) still shows on
   hover. Shared by the claim-detail Edit button and the Actions-column icon. */
.claim-edit-disabled,
.claim-edit-disabled:hover,
.claim-edit-disabled:focus {
    opacity: 0.45;
    cursor: not-allowed !important;
    box-shadow: none !important;
}
.btn.claim-edit-disabled,
.btn.claim-edit-disabled:hover,
.btn.claim-edit-disabled:focus {
    background-color: transparent !important;
    color: #9aa4b2 !important;
    border-color: #d7d3cc !important;
}
.claims-icon-btn.claim-edit-disabled,
.claims-icon-btn.claim-edit-disabled:hover {
    background: transparent !important;
    color: #b9b4ab !important;
    border-color: transparent !important;
}
/* ── Claim EDIT mode (V3 wizard editing a live claim) ── */
/* Compact "Editing" pill pinned to the far-right of the step-dots header. */
.v2-progress-header { position: relative; }
.v3-edit-pill {
    position: absolute; top: 12px; right: 20px; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: help;
}
.v3-edit-pill i { font-size: 12px; }
/* A field locked because it can't be edited (completed field on an in-progress
   claim, Location, or Additional Notes). Dimmed; the disabled input blocks input. */
.v2-field.v3-field-locked { opacity: 0.7; }
.v2-field.v3-field-locked .v2-input,
.v2-field.v3-field-locked .v2-select,
.v2-field.v3-field-locked .v2-textarea { cursor: not-allowed; background: #f3f4f6; }
/* Custom widgets (searchable FH/IC dropdowns) locked by blocking pointer events. */
.v3-edit-locked { opacity: 0.6; pointer-events: none; }
/* Small lock icon on a locked field's label, with a hover description. */
.v3-lock-badge { margin-left: 6px; font-size: 11px; color: #9aa4b2; cursor: help; }
/* A locked action icon (e.g. the trash on an existing policy/beneficiary). */
.v2-icon-btn.v3-icon-locked,
.v2-icon-btn.v3-icon-locked:hover { color: #b9b4ab !important; background: transparent !important; cursor: not-allowed !important; }

/* ── Step-3 "Pending Changes" panel (edit mode) ── */
.v3-changes-panel {
    border: 1px solid #d8e3da; border-radius: 12px; background: #fbfdfc;
    padding: 14px 16px; margin-bottom: 16px;
}
.v3-changes-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-weight: 700; color: #1E6332; font-size: 14px; margin-bottom: 10px;
    padding-bottom: 8px; border-bottom: 1px solid #eef1ee;
}
.v3-changes-sub { font-weight: 500; color: #92400e; font-size: 11.5px; }
.v3-changes-empty { color: #6b7280; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.v3-changes-empty i { color: #2F8542; }
.v3-changes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; align-items: start; }
.v3-changes-sec { border: 1px solid #e5ece7; border-radius: 10px; background: #fff; padding: 10px 12px; }
.v3-changes-sec.is-added { background: #f0fdf4; border-color: #cdebd6; }
.v3-changes-sec-title { font-weight: 700; font-size: 12.5px; color: #214A3E; margin-bottom: 7px; padding-bottom: 6px; border-bottom: 1px solid #eef3ef; display: flex; align-items: center; gap: 6px; }
.v3-changes-badge { background: #18A74B; color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; padding: 1px 6px; border-radius: 4px; vertical-align: middle; }
.v3-changes-row { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; padding: 3px 0; font-size: 12.5px; }
.v3-changes-label { min-width: 78px; color: #94a3b8; font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; }
.v3-changes-old { color: #b91c1c; text-decoration: line-through; }
.v3-changes-arrow { color: #94a3b8; font-size: 10px; }
.v3-changes-newv { color: #1E6332; font-weight: 700; }
/* "Save Changes" disabled until there are pending edits */
.v3-save-disabled, .v3-save-disabled:hover { opacity: .5 !important; cursor: not-allowed !important; box-shadow: none !important; filter: grayscale(.25); transform: none !important; }
/* "Which claim" chip on policy cards, the summary table, the bene linked-policies
   list, and the link-to-policies checkboxes (edit mode) — a solid, prominent badge. */
.v3-claim-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 3px 10px; border-radius: 11px; background: #1E6332; color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .3px; vertical-align: middle; white-space: nowrap; box-shadow: 0 1px 3px rgba(30, 99, 50, .25); }
.v3-claim-chip i { font-size: 9px; opacity: .9; }
.v3-claim-chip-new { background: #f59e0b; color: #fff; box-shadow: 0 1px 3px rgba(245, 158, 11, .3); }
/* keep each IC + its claim chip together on the bene "Linked Policies" line */
.v3-linked-pol { display: inline-flex; align-items: center; margin: 0 10px 6px 0; }
.claims-icon-btn:hover {
    /* White against the beige column so hover stands out (column base is
       now #F4F0E9 — a beige hover would be invisible). */
    background: #fff;
    border-color: #C5BCA2;
    color: #1E6332;
    box-shadow: 0 1px 3px rgba(33, 74, 62, 0.12);
}
.claims-icon-btn.has-esign { color: #1E6332; }
.claims-icon-btn.has-esign:hover {
    background: #1E6332;
    color: #fff;
    border-color: #1E6332;
}

/* Sticky Actions column — styled as a DETACHED floating panel pinned to
   the right edge, deliberately NOT looking like a table column. The
   28px gutter on the previous column + a solid 2px left border + a deep
   layered left shadow make it read as a separate sidebar that the table
   scrolls underneath. Same beige top-to-bottom (header + body) so the
   whole column is one continuous vertical panel. */
.claims-table th.claims-sticky-action,
.claims-table td.claims-sticky-action {
    position: sticky !important;
    right: 0 !important;
    background: #F4F0E9;
    /* NO `border-left` here. `.claims-table` is `border-collapse: collapse`,
       so a collapsed border is painted by the table GRID, not the cell box —
       on a position:sticky cell it scrolls away with the grid and only lines
       up at the right-scroll extreme (the "border only shows when scrolled
       all the way right" bug the user hit twice). The FIRST box-shadow below
       is an `inset` 2px line: box-shadow is painted with the cell's OWN box,
       so it stays glued to the column's left edge in EVERY horizontal scroll
       position. The remaining shadows are the soft left depth that sells the
       floating-panel look. */
    box-shadow:
        inset 2px 0 0 0 #C19A6B,
        -10px 0 18px -8px rgba(33, 74, 62, 0.22),
        -20px 0 28px -20px rgba(0, 0, 0, 0.14);
    z-index: 11;
    padding-left: 12px !important;
    padding-right: 14px !important;
}
/* Row hover: step the beige one shade darker so hover feedback still reads
   against the panel base. */
.claims-table tr:hover td.claims-sticky-action { background: #E8DFD0; }
.claims-table thead th.claims-sticky-action {
    z-index: 13 !important;  /* Above regular thead (z-index: 10) */
    /* Continuous beige with the body cells so header+body read as ONE
       vertical panel — NOT the table-header gradient. This is the key to
       making it look separate from the table chrome. */
    background: #F4F0E9 !important;
    text-align: center !important;
    /* No border-left — the inset box-shadow divider on the combined
       .claims-sticky-action rule above already covers the header th (this
       rule doesn't override box-shadow). A real border here would hit the
       same collapsed-border-on-sticky bug and only show scrolled-right. */
}
.claims-table thead th.claims-sticky-action .claims-th-label {
    display: inline-block;
    color: #475569;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.75px;
}

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

/* Label is a descendant of the draggable <th> — no pointer-events: none so
   the label itself can still receive click events for sort AND participate in
   drag (drag bubbles to the draggable parent). */
.claims-th-label { user-select: none; }

/* ── Status column "?" help button + popover ────────────────────────────────
   The "?" sits next to the Status header; clicking it opens a branded popover
   explaining each status with its color badge. */
.claims-th-info {
    border: none;
    background: transparent;
    padding: 0;
    margin-left: 4px;
    color: #b0a99e;
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1;
    vertical-align: middle;
    transition: color 0.15s ease, transform 0.15s ease;
}
.claims-th-info:hover { color: #1e6332; transform: scale(1.12); }

.claims-status-info-pop {
    position: fixed;
    z-index: 10500;
    width: 350px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid #e8e3da;
    border-radius: 13px;
    box-shadow: 0 14px 38px rgba(33, 74, 62, 0.20), 0 2px 6px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    animation: csiPop 0.15s ease;
}
@keyframes csiPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.claims-status-info-pop .csi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    background: linear-gradient(135deg, #1e6332, #2f8542);
    color: #fff;
}
.claims-status-info-pop .csi-title {
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: normal;
}
.claims-status-info-pop .csi-close {
    border: none;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.claims-status-info-pop .csi-close:hover { background: rgba(255, 255, 255, 0.34); }
.claims-status-info-pop .csi-body {
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.claims-status-info-pop .csi-row {
    display: flex;
    gap: 11px;
    align-items: flex-start;
}
.claims-status-info-pop .csi-badge {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 11px;
    white-space: nowrap;
    min-width: 80px;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 1px;
}
.claims-status-info-pop .csi-desc {
    font-size: 0.8rem;
    color: #4b5563;
    line-height: 1.5;
}
/* Dark theme (BETA) */
body.dark-theme .claims-status-info-pop { background: #1f2937; border-color: #374151; }
body.dark-theme .claims-status-info-pop .csi-desc { color: #cbd5e1; }

/* Column manager locked row */
.column-item.locked { opacity: 0.7; background: #F4F0E9; }
.column-item.locked .fa-lock { color: #C5BCA2; margin-right: 4px; }

/* Claims Export modal — force the format tile row to 3 columns (CSV/Excel/PDF)
   instead of the default 2 from reports.css so all three fit on a single row. */
.export-format-grid--3 {
    grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 520px) {
    /* On phones the 3 tiles stack to a single column for readability */
    .export-format-grid--3 { grid-template-columns: 1fr !important; }
}

/* Claims Export modal — column selection grid (2 columns on desktop, 1 on mobile) */
.claims-export-col-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 12px;
    max-height: 260px;
    overflow-y: auto;
    padding: 8px 10px;
    background: #F4F0E9;
    border: 1px solid #e8e0cf;
    border-radius: 6px;
}
@media (max-width: 520px) {
    .claims-export-col-grid { grid-template-columns: 1fr; max-height: 200px; }
}
.claims-export-col-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12.5px;
    color: #231F20;
    transition: background 0.12s ease;
    margin: 0;
}
.claims-export-col-item:hover { background: rgba(255,255,255,0.6); }
.claims-export-col-item input[type="checkbox"] {
    accent-color: #1E6332;
    width: 15px; height: 15px;
    flex-shrink: 0;
    margin: 0;
}