/* accounts.css - My Accounts snapshot + insurance info panel + doc requests */

/* ==================== MY ACCOUNTS PAGE ==================== */
#page-my-accounts {
    background: linear-gradient(160deg, #f8fffe 0%, #F4F0E9 40%, #ecfdf5 70%, #f5f3ff 100%);
    padding: 1.5rem;
    border-radius: 0.75rem;
}

/* ==================== SECTION 1: SUMMARY STRIP ====================
   May 20 redesign — 4-tile clickable summary matching the detail-modal
   Snapshot card. Each tile is its own button so click-to-drill is explicit
   and keyboard-accessible. Gradient icon badges color-code by metric type
   (purple Locations / blue Claims / brand-green Gross / emerald Net). */
.acct-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

.acct-summary-tile {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    padding: 1rem 1.125rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    min-width: 0;
    width: 100%;
}

.acct-summary-tile:hover,
.acct-summary-tile:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(30, 99, 50, 0.12), 0 2px 6px rgba(0,0,0,0.04);
    border-color: #d4ccbb;
    outline: none;
}

.acct-summary-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Color schemes per tile type (gradient icon backgrounds) */
.acct-summary-tile.tile-locations .acct-summary-icon { background: linear-gradient(135deg, #6d28d9, #8b5cf6); box-shadow: 0 4px 12px rgba(109, 40, 217, 0.28); }
.acct-summary-tile.tile-claims    .acct-summary-icon { background: linear-gradient(135deg, #2563eb, #60a5fa); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28); }
.acct-summary-tile.tile-gross     .acct-summary-icon { background: linear-gradient(135deg, #1E6332, #2F8542); box-shadow: 0 4px 12px rgba(30, 99, 50, 0.32); }
.acct-summary-tile.tile-net       .acct-summary-icon { background: linear-gradient(135deg, #15803d, #22c55e); box-shadow: 0 4px 12px rgba(21, 128, 61, 0.32); }

.acct-summary-body { min-width: 0; flex: 1; }

.acct-summary-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acct-summary-tile.tile-net .acct-summary-value { color: #15803d; }

.acct-summary-label {
    font-size: 0.66rem;
    color: #6b7280;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

@media (max-width: 1100px) {
    .acct-summary-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ==================== FILTER CHIPS ====================
   Quick activity-state narrowing above the card grid. Active chip uses the
   brand-green gradient to match the rest of the page. */
.acct-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.25rem 0 0.75rem;
}

.acct-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    color: #4b5563;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.acct-filter-chip i {
    font-size: 0.7rem;
    color: #9ca3af;
    transition: color 0.15s ease;
}

.acct-filter-chip:hover {
    background: #F4F0E9;
    border-color: #d4ccbb;
    color: #1E6332;
}

.acct-filter-chip:hover i { color: #1E6332; }

.acct-filter-chip.active {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    border-color: #1E6332;
    color: #fff;
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.3);
}

.acct-filter-chip.active i { color: #fff; }

/* ==================== SECTION 2: CONTROLS ==================== */
.acct-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.acct-search-wrap {
    position: relative;
    flex: 1;
    max-width: 360px;
}

.acct-search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.85rem;
    pointer-events: none;
}

.acct-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

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

.acct-controls-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.toolbar-btn {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.toolbar-btn i.spinning {
    animation: progressSpin 1s linear infinite;
}

/* Result count */
.acct-result-count {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 0.75rem;
    padding-left: 0.125rem;
}

.acct-result-count strong {
    color: #6b7280;
    font-weight: 600;
}

/* ==================== ACCOUNT CARD GRID ==================== */
.acct-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.acct-card {
    background: #fff;
    border-radius: 0.875rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    padding: 1.25rem;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    outline: none;
}

.acct-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1E6332, #18A74B);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.acct-card:hover,
.acct-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(30, 99, 50, 0.18), 0 4px 12px rgba(0,0,0,0.06);
    border-color: #1E6332;
}

.acct-card:hover::before,
.acct-card:focus-visible::before {
    opacity: 1;
}

/* Primary-account card variant — gold accent + subtle warm tint */
.acct-card.is-primary {
    border-color: #e5cb84;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.1), 0 4px 14px rgba(245, 158, 11, 0.06);
    background: linear-gradient(180deg, #fffcf2 0%, #ffffff 60%);
}
.acct-card.is-primary::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    opacity: 1;
}
.acct-card.is-primary:hover {
    box-shadow: 0 12px 32px rgba(245, 158, 11, 0.22), 0 4px 12px rgba(245, 158, 11, 0.1);
    border-color: #d97706;
}

/* Primary ribbon — top-right corner pill */
.acct-card-ribbon {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 10px;
    border-radius: 999px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}
.acct-card-ribbon i { font-size: 0.6rem; }

.acct-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid #f3f4f6;
}

.acct-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #1E6332, #2F8542);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: -0.5px;
    box-shadow: 0 4px 12px rgba(30, 99, 50, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.acct-card:hover .acct-card-avatar,
.acct-card:focus-visible .acct-card-avatar {
    transform: scale(1.06) rotate(-2deg);
}

/* Primary cards get gold avatar tint */
.acct-card.is-primary .acct-card-avatar {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Title + sub-line stack between avatar and arrow */
.acct-card-titlewrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.acct-card-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

.acct-card-sub {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Quick Open Folder icon button on each card */
.acct-card-folder-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.18s ease;
    font-size: 0.85rem;
}

.acct-card-folder-btn:hover,
.acct-card-folder-btn:focus-visible {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    border-color: #1E6332;
    color: #fff;
    box-shadow: 0 4px 12px rgba(30, 99, 50, 0.3);
    transform: scale(1.06);
    outline: none;
}

.acct-card-arrow {
    color: #d1d5db;
    font-size: 0.75rem;
    transition: color 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.acct-card:hover .acct-card-arrow,
.acct-card:focus-visible .acct-card-arrow {
    color: #1E6332;
    transform: translateX(4px);
}

/* Legacy primary badge (kept for any other surfaces that still reference it) */
.acct-primary-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fef3c7;
    color: #f59e0b;
    font-size: 0.65rem;
    margin-left: 6px;
    flex-shrink: 0;
}

/* Primary Account badge — detail panel header */
.acct-detail-primary-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    background: #fef3c7;
    color: #b45309;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 8px;
    white-space: nowrap;
}
.acct-detail-primary-badge i {
    color: #f59e0b;
    font-size: 0.6rem;
}

/* Card metrics — 3-column row */
.acct-card-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
    margin-bottom: 0.875rem;
}

.acct-card-metric {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.375rem;
    border-radius: 0.5rem;
    background: #f9fafb;
    text-align: center;
}

.acct-card-metric-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Net column gets brand-green emphasis */
.acct-card-metric.net .acct-card-metric-value {
    color: #15803d;
}

.acct-card-metric-label {
    font-size: 0.62rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
    margin-top: 0.125rem;
}

/* ── Inline SVG sparkline (12-month Net Funded trend) ───────────────── */
.acct-card-spark {
    margin: 0.5rem 0 0.625rem;
    padding: 0.4rem 0.5rem 0.3rem;
    background: linear-gradient(180deg, #fafafa 0%, transparent 100%);
    border-radius: 0.5rem;
    position: relative;
}

.acct-card-spark svg {
    width: 100%;
    height: 38px;
    display: block;
    overflow: visible;
}

.acct-card-spark-label {
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 0.58rem;
    color: #9ca3af;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    pointer-events: none;
}

.acct-card-spark.empty {
    background: transparent;
    padding-top: 0.6rem;
}

.acct-card-spark.empty .acct-card-spark-label {
    position: static;
    display: block;
    text-align: center;
    margin-top: 0.25rem;
    color: #b9b09a;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.66rem;
}

.acct-card-spark.empty svg {
    height: 18px;
}

/* Neutral status chip ("No claims yet" empty state) */
.acct-status-chip.neutral {
    background: #f3f4f6;
    color: #6b7280;
    font-weight: 600;
    padding: 0.22rem 0.65rem;
}

.acct-status-chip.neutral i {
    font-size: 0.62rem;
    color: #9ca3af;
}

.acct-status-chips.empty-state {
    margin-top: 0.25rem;
}

/* Status bar — multi-color horizontal bar */
.acct-status-bar {
    height: 5px;
    border-radius: 3px;
    background: #e5e7eb;
    overflow: hidden;
    display: flex;
    margin-top: auto;
}

.acct-status-seg {
    height: 100%;
    transition: width 0.4s ease;
}

.acct-status-seg.funded { background: #1e6332; }
.acct-status-seg.in-process { background: #c19a6b; }
.acct-status-seg.closed { background: #475453; }
.acct-status-seg.withdrawn { background: #db0000; }

/* Status chips row below status bar */
.acct-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.acct-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: 0.1px;
}

.acct-status-chip .chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.acct-status-chip .chip-count {
    font-weight: 700;
}

.acct-status-chip.funded { background: #e7f0ea; color: #1e6332; }
.acct-status-chip.funded .chip-dot { background: #1e6332; }
.acct-status-chip.in-process { background: #f6efe4; color: #8a6536; }
.acct-status-chip.in-process .chip-dot { background: #c19a6b; }
.acct-status-chip.closed { background: #eceeef; color: #475453; }
.acct-status-chip.closed .chip-dot { background: #475453; }
.acct-status-chip.withdrawn { background: #fbe9e9; color: #b00000; }
.acct-status-chip.withdrawn .chip-dot { background: #db0000; }

/* Empty / no-match state — full-width inside the grid via column-span trick */
.acct-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: #9ca3af;
    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
    border: 2px dashed #e5e7eb;
    border-radius: 1rem;
}

.acct-empty i {
    font-size: 2.5rem;
    margin-bottom: 0.85rem;
    color: #1E6332;
    opacity: 0.45;
    display: block;
}

.acct-empty-title {
    font-size: 1.05rem;
    margin: 0 0 0.35rem;
    color: #1f2937;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.acct-empty-sub {
    font-size: 0.85rem;
    margin: 0 0 1rem;
    color: #6b7280;
    line-height: 1.5;
}

.acct-empty-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.125rem;
    border: 1.5px solid #1E6332;
    border-radius: 999px;
    background: #fff;
    color: #1E6332;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
}

.acct-empty-reset:hover {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    box-shadow: 0 4px 12px rgba(30, 99, 50, 0.28);
}

/* Responsive grid */
@media (max-width: 1200px) {
    .acct-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .acct-summary-strip { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
}

@media (max-width: 768px) {
    .acct-summary-strip { grid-template-columns: 1fr; }
    .acct-grid { grid-template-columns: 1fr; }
}

/* ==================== DETAIL MODAL (centered, 80vw/80vh) ==================== */
/* Was a right-side slide-in panel; now a centered modal that's wider so we
   can fit the new Property Info section + financials side-by-side on desktop.
   The .acct-detail-panel ID + classes are preserved so existing JS keeps
   working — only the visual presentation changed. */
.acct-detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    /* No backdrop-filter: blur() — blurring the heavy My Locations grid (dozens
       of account cards) behind the modal on every paint was causing 400-580ms
       input lag (poor INP) on open/close. A solid dim is cheap and looks clean. */
}

.acct-detail-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.acct-detail-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: 90vw;
    max-width: 1760px;
    /* Taller modal so the new 2-col layout (Account Details left, metrics +
       claims stack right) fits without forcing modal-body scroll. ~94vh up
       to 1200px on big monitors. */
    height: 94vh;
    max-height: 1200px;
    background: #fafbfc;
    z-index: 1051;
    box-shadow: 0 24px 60px rgba(0,0,0,0.28), 0 6px 20px rgba(0,0,0,0.12);
    border-radius: 16px;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.acct-detail-panel.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Impersonation banner offset — mirror the AI chat modal pattern so the
   modal stays vertically centered below the 32px red banner. */
body.impersonating .acct-detail-panel {
    top: calc(50% + 16px);
}

.acct-detail-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #1E6332 0%, #214A3E 60%, #2F8542 100%);
    flex-shrink: 0;
    color: #fff;
}

.acct-detail-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}

.acct-detail-back {
    display: none; /* shown on mobile only */
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background 0.2s;
}

.acct-detail-back:hover {
    background: rgba(255,255,255,0.18);
}

.acct-detail-title-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.acct-detail-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
    min-width: 0;
    flex: 1 1 auto;
}

/* When the primary-account badge is present, the title is wrapped in a flex
   row alongside the badge. Title can still ellipsis-truncate while the badge
   stays at its natural width. */
.acct-detail-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.acct-detail-subtitle {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acct-detail-subtitle:empty {
    display: none;
}

.acct-detail-close {
    width: 34px;
    height: 34px;
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.acct-detail-close:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: rotate(90deg);
}

.acct-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background: #f7f8fa;
    /* position:relative anchors the .acct-detail-loading overlay so it covers
       only the body area (header stays visible during load). */
    position: relative;
}

/* Body content visibility — hidden until the loading overlay clears.
   Prevents the empty/partial body from flashing behind the spinner. */
.acct-detail-body-content {
    display: none;
    animation: acctBodyFadeIn 0.28s ease-out;
}
.acct-detail-body-content.show {
    display: block;
}
@keyframes acctBodyFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stagger the section cards inside the body content for a polished reveal —
   each card fades up sequentially after the body finishes its initial fade.
   New layout (May 20): grid (LEFT Account Details + RIGHT Snapshot/Trend/
   Financial Summary) + full-width Recent Claims below.
   prefers-reduced-motion users get instant reveal. */
.acct-detail-body-content.show > * {
    animation: acctCardRise 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
}
.acct-detail-body-content.show > *:nth-child(1) { animation-delay: 0.04s; }
.acct-detail-body-content.show > *:nth-child(2) { animation-delay: 0.32s; }
.acct-detail-body-content.show .acct-detail-col-left > *  { animation: acctCardRise 0.45s 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards; }
.acct-detail-body-content.show .acct-detail-col-right > *:nth-child(1) { animation: acctCardRise 0.45s 0.14s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards; }
.acct-detail-body-content.show .acct-detail-col-right > *:nth-child(2) { animation: acctCardRise 0.45s 0.20s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards; }
.acct-detail-body-content.show .acct-detail-col-right > *:nth-child(3) { animation: acctCardRise 0.45s 0.26s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards; }

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

@media (prefers-reduced-motion: reduce) {
    .acct-detail-body-content,
    .acct-detail-body-content.show > *,
    .acct-detail-body-content.show .acct-detail-col-left > *,
    .acct-detail-body-content.show .acct-detail-col-right > * {
        animation: none !important;
    }
}

/* Account-detail loading overlay tweaks — uses the shared .cd-loading visual
   (modals.css) so the spinner + green title + sub copy match the claim detail
   panel exactly. We just need to make sure it sits inside the body and uses
   the body's beige background instead of white so the brand looks unified. */
.acct-detail-loading {
    background: #f7f8fa;
}
body.dark-theme .acct-detail-loading {
    background: var(--theme-bg, #1a1d23);
}

/* Detail panel header — restyle the primary-account badge for the green header */
.acct-detail-panel .acct-detail-primary-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.acct-detail-panel .acct-detail-primary-badge i {
    color: #fde047;
}

/* Account Folder Card — May 20 visual upgrade: brand-green gradient icon,
   beige background with EFF-green left-accent bar, document count chip,
   animated "Open →" CTA on the right. Built to be the most clickable-
   looking card in the entire modal so users actually notice it sitting at
   the bottom of the left column. */
.acct-folder-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px 16px 22px;
    background: linear-gradient(135deg, #F4F0E9 0%, #ede5d3 100%);
    border: 1.5px solid #d4ccbb;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s ease,
                border-color 0.22s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.08);
}

/* Bold left-accent bar — same shape as ack-required announcement / branded
   feature highlights elsewhere in the app, signals "important / clickable". */
.acct-folder-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #1E6332 0%, #2F8542 100%);
}

/* Subtle shimmer that hints at interactivity without being too loud */
.acct-folder-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(30, 99, 50, 0.06) 0%, transparent 70%);
    pointer-events: none;
    transition: transform 0.4s ease;
}

.acct-folder-card:hover,
.acct-folder-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(30, 99, 50, 0.2), 0 2px 6px rgba(30, 99, 50, 0.1);
    border-color: #1E6332;
    outline: none;
}

.acct-folder-card:hover::after,
.acct-folder-card:focus-visible::after {
    transform: translate(-20px, 10px) scale(1.1);
}

.acct-folder-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #1E6332 0%, #2F8542 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(30, 99, 50, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
}

.acct-folder-icon i {
    /* Slight wiggle on hover */
    transition: transform 0.3s ease;
}

.acct-folder-card:hover .acct-folder-icon i,
.acct-folder-card:focus-visible .acct-folder-icon i {
    transform: scale(1.08) rotate(-4deg);
}

.acct-folder-info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

/* Name + count chip row */
.acct-folder-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.acct-folder-name {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: #1E6332;
    letter-spacing: -0.2px;
}

.acct-folder-desc {
    display: block;
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 3px;
    line-height: 1.4;
}

/* Document count chip — green-tinted when there are files, neutral gray
   when the folder is empty. */
.acct-folder-count-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fff;
    color: #1E6332;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid #c8d5cc;
    box-shadow: 0 1px 2px rgba(30, 99, 50, 0.08);
}

.acct-folder-count-chip i {
    font-size: 0.62rem;
}

.acct-folder-count-chip.empty {
    color: #9ca3af;
    border-color: #e5e7eb;
    background: rgba(255, 255, 255, 0.7);
}

/* "Open →" CTA button at the right end */
.acct-folder-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1.5px solid #1E6332;
    border-radius: 999px;
    color: #1E6332;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: background 0.22s ease, color 0.22s ease, padding-right 0.22s ease;
}

.acct-folder-cta-arrow {
    font-size: 0.72rem;
    transition: transform 0.25s ease;
}

.acct-folder-card:hover .acct-folder-cta,
.acct-folder-card:focus-visible .acct-folder-cta {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    padding-right: 16px;
}

.acct-folder-card:hover .acct-folder-cta-arrow,
.acct-folder-card:focus-visible .acct-folder-cta-arrow {
    transform: translateX(4px);
}

@media (max-width: 720px) {
    /* On mobile, hide the "Open" label so the icon + arrow stay punchy */
    .acct-folder-cta-label { display: none; }
    .acct-folder-cta { padding: 8px 10px; }
}

/* ── Funding Trend chart card ────────────────────────────────────────── */
.acct-trend-card {
    /* Slight tinted background so the chart card visually pairs with the
       Snapshot card above it (both = "at a glance" metrics). */
    background: linear-gradient(180deg, #ffffff 0%, #fcfbf7 100%);
}

.acct-trend-canvas-wrap {
    position: relative;
    height: 180px;
    margin-top: 0.25rem;
}

@media (max-width: 1100px) {
    .acct-trend-canvas-wrap { height: 200px; }
}

/* ── New Snapshot card (May 20 redesign) ─────────────────────────────────
   4-tile grid (Claims / Gross / Fees / Net), color-coded by metric type,
   each clickable to drill into Claims. Family Pay informational strip
   below when applicable. */
.acct-snap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.625rem;
}

@media (max-width: 720px) {
    .acct-snap-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.acct-snap-tile {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    padding: 0.625rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    min-width: 0;
}

.acct-snap-tile:hover,
.acct-snap-tile:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-color: #d4ccbb;
    outline: none;
}

.acct-snap-tile-icon {
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.acct-snap-tile.tile-claims  .acct-snap-tile-icon { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #6d28d9; }
.acct-snap-tile.tile-gross   .acct-snap-tile-icon { background: linear-gradient(135deg, #F4F0E9, #E8DFD0); color: #1E6332; }
.acct-snap-tile.tile-fees    .acct-snap-tile-icon { background: linear-gradient(135deg, #fff7ed, #fed7aa); color: #c2410c; }
.acct-snap-tile.tile-net     .acct-snap-tile-icon { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #166534; }

.acct-snap-tile-body {
    min-width: 0;
    flex: 1;
}

.acct-snap-tile-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acct-snap-tile.tile-net .acct-snap-tile-value { color: #166534; }

.acct-snap-tile-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    color: #6b7280;
    margin-top: 2px;
}

/* Family Pay informational strip below the snapshot tiles */
.acct-snap-fp {
    margin-top: 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #F4F0E9 0%, #ede5d3 100%);
    border: 1px solid #e5e1da;
    border-radius: 0.625rem;
    padding: 0.5rem 0.875rem;
}

.acct-snap-fp-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: #1E6332;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(30, 99, 50, 0.18);
}

.acct-snap-fp-body {
    flex: 1;
    min-width: 0;
}

.acct-snap-fp-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1E6332;
}

.acct-snap-fp-sub {
    font-size: 0.66rem;
    color: #6b7280;
    line-height: 1.35;
    margin-top: 1px;
}

.acct-snap-fp-value {
    font-size: 1rem;
    font-weight: 700;
    color: #1E6332;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Detail KPIs — 3-column row */
.acct-detail-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.acct-detail-kpi {
    background: #fff;
    border-radius: 0.75rem;
    padding: 0.875rem;
    border-left: 3px solid #1E6332;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.acct-detail-kpi:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.acct-detail-kpi:nth-child(1) { border-left-color: #9333ea; }
.acct-detail-kpi:nth-child(2) { border-left-color: #3b82f6; }
.acct-detail-kpi:nth-child(3) { border-left-color: #18A74B; }

.acct-detail-kpi-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.acct-detail-kpi-label {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Detail section headers */
.acct-detail-section {
    margin-bottom: 1.25rem;
}

.acct-detail-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-bottom: 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.acct-detail-section-title i {
    color: #1E6332;
    font-size: 0.8rem;
}

/* Detail donut */
.acct-detail-donut-wrap {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: #fff;
    border-radius: 0.75rem;
    padding: 1.125rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
}

.acct-detail-donut {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #e5e7eb;
    position: relative;
    flex-shrink: 0;
}

.acct-detail-donut-hole {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
}

.acct-detail-legend {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.acct-detail-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #374151;
    padding: 0.2rem 0;
}

.acct-detail-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.acct-detail-legend-item strong {
    color: #1f2937;
    margin-left: auto;
    font-weight: 700;
    min-width: 16px;
    text-align: right;
}

.acct-detail-legend-pct {
    font-size: 0.7rem;
    color: #9ca3af;
    font-weight: 500;
    min-width: 32px;
}

/* Detail financial ledger — mirrors the claim detail Financial Breakdown:
   bordered light box, no per-row dividers, gray (not red) subtractions, green
   "+" Family Pay, prominent green Net with a 2px green top border. Same math
   shape as #claimDetailPanel .fin-ledger so the styling is consistent across
   the app, but scoped to .acct-detail-ledger so it doesn't override the claim
   detail panel. */
.acct-detail-ledger {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.85rem 1rem;
}

.acct-detail-ledger-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0;
    font-size: 0.9rem;
    border-bottom: none;
}

.acct-detail-ledger-label {
    color: #6c757d;
}

.acct-detail-ledger-value {
    font-weight: 600;
    color: #212529;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Gray subtractions (NOT red). Same convention as the claim ledger. */
.acct-detail-ledger-row.subtract .acct-detail-ledger-value,
.acct-detail-ledger-value.fin-neg {
    color: #4b5563;
}

/* Green Family Pay "+" — informational, doesn't disturb math. */
.acct-detail-ledger-value.fin-pos {
    color: #1E6332;
    font-weight: 700;
}

/* Gross Funded — emphasized as the starting figure. */
.acct-detail-ledger-row.fin-ledger-sub .acct-detail-ledger-value {
    font-weight: 700;
}

.acct-detail-ledger-row.total {
    border-top: 2px solid #1E6332;
    border-bottom: none;
    margin-top: 0.45rem;
    padding-top: 0.7rem;
}

.acct-detail-ledger-row.total .acct-detail-ledger-label {
    color: #1f2937;
    font-weight: 700;
    font-size: 0.95rem;
}

.acct-detail-ledger-row.total .acct-detail-ledger-value {
    color: #1E6332;
    font-weight: 700;
    font-size: 1.25rem;
}

/* Detail recent claims */
.acct-detail-claims-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
}

.acct-detail-claims-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #64748b;
    font-weight: 600;
    padding: 0.625rem 0.625rem;
    border-bottom: 2px solid #e5e7eb;
    text-align: left;
    background: #f8fafc;
}

.acct-detail-claims-table td {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}

.acct-detail-claims-table tr:last-child td {
    border-bottom: none;
}

.acct-detail-claims-table tbody tr {
    transition: background 0.15s ease;
}

.acct-detail-claims-table tbody tr:hover {
    background: #F4F0E9;
}

.acct-claim-link {
    color: #1E6332;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

.acct-claim-link:hover {
    text-decoration: underline;
    color: #166534;
}

/* Whole row is clickable (drills into the claim) — but the Net popover hover
   intent still needs to work, so we let the popover container own its own
   cursor (cursor:help). Row gets a subtle hover lift for affordance. */
.acct-claim-row {
    cursor: pointer;
    transition: background 0.12s ease;
}

/* Stacked Created / Funded dates in the Date cell */
.acct-claim-date-cell {
    white-space: nowrap;
}

.acct-claim-dates {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
}

.acct-claim-date-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.74rem;
}

.acct-claim-date-row .acct-claim-date-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #9ca3af;
    font-weight: 600;
    min-width: 46px;
}

.acct-claim-date-row.funded .acct-claim-date-label {
    color: #2F8542;
}

.acct-claim-date-row .acct-claim-date-value {
    color: #374151;
    font-variant-numeric: tabular-nums;
}

/* Net cell padding tightening so the Net amount sits flush right but the
   popover can still position itself relative to the cell. */
.acct-claim-net-cell {
    padding-right: 0.5rem;
}

.acct-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.acct-status-badge.funded { background: #e7f0ea; color: #1e6332; }
.acct-status-badge.in-process { background: #f6efe4; color: #8a6536; }
.acct-status-badge.closed { background: #eceeef; color: #475453; }
.acct-status-badge.withdrawn { background: #fbe9e9; color: #b00000; }

/* Detail "View All" button */
.acct-detail-viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid #1E6332;
    border-radius: 0.625rem;
    background: transparent;
    color: #1E6332;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 0.75rem;
}

.acct-detail-viewall:hover {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.3);
}

.acct-detail-viewall i {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.acct-detail-viewall:hover i {
    transform: translateX(2px);
}

/* ==================== INSURANCE COMPANY INFO PANEL ==================== */
.ic-info-panel {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-top: 1rem;
    display: none;
}

.ic-info-panel.show {
    display: block;
    animation: acctSlideInDown 0.3s ease;
}

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

.ic-info-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #bae6fd;
}

.ic-info-icon {
    width: 40px;
    height: 40px;
    background: #0284c7;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
}

.ic-info-title {
    font-weight: 600;
    color: #0c4a6e;
    font-size: 1rem;
    margin: 0;
}

.ic-info-subtitle {
    font-size: 0.8rem;
    color: #0369a1;
}

.ic-info-grid {
    display: grid;
    gap: 0.75rem;
}

.ic-info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.ic-info-item-label {
    font-size: 0.8rem;
    color: #0369a1;
    font-weight: 500;
    min-width: 200px;
}

.ic-info-item-value {
    font-size: 0.85rem;
    color: #0c4a6e;
    font-weight: 600;
    word-break: break-word;
    overflow-wrap: break-word;
    flex: 1;
    min-width: 0;
}

.ic-info-item-value.yes { color: #1E6332; }
.ic-info-item-value.no { color: #dc3545; }

.ic-info-note {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.4;
}

.ic-info-note i {
    color: #f59e0b;
    margin-right: 0.25rem;
}

.ic-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

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

.ic-badge.success { background: #F4F0E9; color: #166534; }
.ic-badge.warning { background: #fef3c7; color: #92400e; }
.ic-badge.info { background: #dbeafe; color: #1e40af; }
.ic-badge.danger { background: #fee2e2; color: #991b1b; }

/* ==================== DOCUMENT REQUESTS SECTION ==================== */
.doc-requests-section {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 1rem;
    padding: 0;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
    overflow: hidden;
}

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

.doc-requests-title {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.doc-requests-title h4 { margin: 0; font-size: 1.2rem; font-weight: 600; }
.doc-requests-title p { margin: 0; font-size: 0.85rem; opacity: 0.9; }

.doc-requests-icon {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.doc-requests-icon.pulse { animation: acctPulseRing 2s infinite; }

@keyframes acctPulseRing {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
    70% { box-shadow: 0 0 0 15px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.doc-requests-badge {
    text-align: center;
    background: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
}

.doc-requests-badge .badge-count {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: #dc2626;
    line-height: 1;
}

.doc-requests-badge .badge-label {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.doc-requests-list {
    padding: 0.5rem 1rem;
    max-height: 400px;
    overflow-y: auto;
}

.doc-request-item {
    background: #fff;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-left: 4px solid #d1d5db;
    transition: all 0.2s ease;
}

.doc-request-item:last-child { margin-bottom: 0; }
.doc-request-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.doc-request-item.urgent { border-left-color: #dc2626; background: linear-gradient(to right, #fef2f2, #fff); }
.doc-request-item.high { border-left-color: #f59e0b; background: linear-gradient(to right, #fffbeb, #fff); }
.doc-request-item.medium { border-left-color: #3b82f6; background: linear-gradient(to right, #eff6ff, #fff); }
.doc-request-item.low { border-left-color: #2F8542; background: linear-gradient(to right, #ecfdf5, #fff); }

.doc-request-urgency { flex-shrink: 0; }

.urgency-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.urgency-badge.urgent { background: #dc2626; color: #fff; }
.urgency-badge.high { background: #f59e0b; color: #fff; }
.urgency-badge.medium { background: #3b82f6; color: #fff; }
.urgency-badge.low { background: #2F8542; color: #fff; }

.doc-request-info { flex: 1; }
.doc-request-claim { margin-bottom: 0.5rem; }
.doc-request-claim strong { color: #1f2937; }

.doc-request-ic {
    display: inline-block;
    background: #e0e7ff;
    color: #4f46e5;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

.doc-request-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.doc-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #f3f4f6;
    color: #374151;
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    border: 1px dashed #d1d5db;
}

.doc-request-note { font-size: 0.8rem; color: #6b7280; }
.doc-request-note i { color: #3b82f6; }

.doc-request-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
}

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

.doc-requests-help {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #92400e;
}

.doc-requests-help a { color: #d97706; font-weight: 500; }

/* =========================================================================
   MY LOCATIONS — DETAIL MODAL LAYOUT (centered 80vw/80vh, post-March 2026)
   ========================================================================= */

/* Account Folder card — slim, sits at the BOTTOM of the left column (below
   the Account Details card + Request a Change form). The wrapping flex
   column owns vertical spacing via `gap`, so no margin needed here. */
.acct-detail-folder-wrap {
    margin: 0;
}

/* Two-column grid for the modal body — Account Details (LEFT, tall) +
   Snapshot/Donut/Financial/Recent Claims stack (RIGHT). Both columns share
   the same height (align-items:stretch). Recent Claims is the right column's
   :last-child and flex-grows so its bottom edge aligns with the bottom of
   Account Details on the left. Stacks on tablet (≤1100px) and mobile. */
.acct-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.acct-detail-col-left,
.acct-detail-col-right {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Left column keeps its breathing room (Account Details is dense already). */
.acct-detail-col-left { gap: 1.25rem; }

/* Right column is tighter — the cards in it (Snapshot, Funding Trend chart,
   Financial Summary, Recent Claims) are visually related "at-a-glance"
   metrics so they read better packed close together. */
.acct-detail-col-right { gap: 0.625rem; }

/* Full-width Recent Claims wrap (sits BELOW the 2-col grid, spans both
   columns). Top margin = same as the right-column gap so it feels visually
   tied to the cards above. */
.acct-detail-claims-wrap {
    margin-top: 1.25rem;
}

/* Recent Claims table wrapper — overflow:visible so the Net amount hover
   popover can extend below the row without being clipped. The slice is
   hard-capped at 5 rows so the table is always short enough to render in
   full without internal scrolling. */
.acct-detail-claims-wrap .acct-section-card > div[style*="overflow-x"] {
    overflow: visible !important;
}

/* Tighter section-card padding inside the new 2-col layout so vertical
   density goes up — less wasted whitespace, less scrolling overall. */
.acct-detail-grid .acct-section-card,
.acct-detail-claims-wrap .acct-section-card {
    padding: 0.875rem 1rem;
}

@media (max-width: 1100px) {
    .acct-detail-grid {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

/* Property Info card — the new "everything we know about this account" panel.
   Sits at the top-right of the modal body on desktop; stacks above the financials
   on smaller widths. */
.acct-prop-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.04);
    overflow: hidden;
}

.acct-prop-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #F4F0E9 0%, #ede5d3 100%);
    border-bottom: 1px solid #e5e1da;
}

.acct-prop-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-shadow: 0 2px 4px rgba(30, 99, 50, 0.2);
}

.acct-prop-header-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1E6332;
    margin: 0;
}

.acct-prop-header-meta {
    margin-left: auto;
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 500;
}

/* ── Open Folder pill button in the Account Details header ─────────────
   Replaces the old "Live data" text meta and the old full-width Account
   Folder card. Sits in the top-right of the Account Details header —
   compact, branded, with an optional document count chip. */
.acct-prop-folder-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 12px;
    background: linear-gradient(135deg, #1E6332 0%, #2F8542 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.32);
    font-family: inherit;
    letter-spacing: -0.1px;
    white-space: nowrap;
}

.acct-prop-folder-btn:hover,
.acct-prop-folder-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(30, 99, 50, 0.42), 0 2px 4px rgba(30, 99, 50, 0.1);
    filter: brightness(1.08);
    outline: none;
}

.acct-prop-folder-btn:active {
    transform: translateY(0);
    filter: brightness(0.96);
}

.acct-prop-folder-btn i {
    font-size: 0.88rem;
    /* Slight wiggle on hover */
    transition: transform 0.25s ease;
}

.acct-prop-folder-btn:hover i,
.acct-prop-folder-btn:focus-visible i {
    transform: scale(1.1) rotate(-5deg);
}

.acct-prop-folder-btn-count {
    background: rgba(255, 255, 255, 0.26);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    margin-left: 2px;
    letter-spacing: 0;
}

@media (max-width: 720px) {
    /* On narrow widths, drop the label so just folder icon + count stays */
    .acct-prop-folder-btn-label { display: none; }
    .acct-prop-folder-btn { padding: 7px 11px 7px 10px; }
}

.acct-prop-body {
    padding: 0.875rem 1rem;
}

/* Loading placeholder while Zoho COQL fetch is in-flight */
.acct-prop-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 2rem 1rem;
    color: #6b7280;
    font-size: 0.85rem;
}

.acct-prop-loading-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #e5e7eb;
    border-top-color: #1E6332;
    border-radius: 50%;
    animation: progressSpin 0.85s linear infinite;
    flex-shrink: 0;
}

/* Property field grid — two columns of label/value pairs, collapses to one on narrow */
.acct-prop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.25rem;
}

@media (max-width: 720px) {
    .acct-prop-grid {
        grid-template-columns: 1fr;
    }
}

.acct-prop-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.acct-prop-field.full {
    grid-column: 1 / -1;
}

/* Address section layout — Business Address on the left, Time Zone stacked
   above Territory on the right. */
.acct-prop-addr-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0.75rem 1.25rem;
    align-items: start;
}
.acct-prop-addr-meta {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
@media (max-width: 720px) {
    .acct-prop-addr-row { grid-template-columns: 1fr; }
}

.acct-prop-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.acct-prop-label i {
    color: #1E6332;
    font-size: 0.7rem;
    width: 12px;
    text-align: center;
}

.acct-prop-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1f2937;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

.acct-prop-value.muted {
    color: #9ca3af;
    font-weight: 500;
    font-style: italic;
}

.acct-prop-value a {
    color: #1E6332;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s ease;
}

.acct-prop-value a:hover {
    border-bottom-color: #1E6332;
}

/* Address block — multi-line with map pin */
.acct-prop-address {
    font-size: 0.88rem;
    color: #1f2937;
    font-weight: 600;
    line-height: 1.45;
}

.acct-prop-address .acct-prop-address-line2 {
    color: #6b7280;
    font-weight: 500;
    font-size: 0.82rem;
    margin-top: 2px;
}

/* Sub-section divider inside the property card (e.g., between Contact and
   Address blocks). Clear soft-green rule + generous spacing so each section is
   visually distinct (where Contact ends and Report Notification Preferences
   begins, etc.). */
.acct-prop-divider {
    margin: 1.25rem 0 0.7rem;
    padding-top: 1.25rem;
    border-top: 1.5px solid #cfe0d4;
}

/* Section header — green left-accent bar clearly marks the start of each
   section, paired with the divider line above for unmistakable separation. */
.acct-prop-subhead {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1E6332;
    margin: 0 0 0.7rem;
    padding-left: 0.55rem;
    border-left: 3px solid #2F8542;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.acct-prop-subhead i {
    color: #2F8542;
    font-size: 0.72rem;
}

/* Tag-style chips for owner / industry / type */
.acct-prop-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.5rem;
    background: #F4F0E9;
    color: #1E6332;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #ede5d3;
}

.acct-prop-chip i {
    font-size: 0.7rem;
}

/* Helper text under a sub-section heading (e.g. "You can add multiple emails…",
   the Request a Change pitch). Stays muted so it doesn't compete with the
   actual field values below. */
.acct-prop-help {
    font-size: 0.72rem;
    color: #6b7280;
    margin: -0.25rem 0 0.625rem;
    font-style: italic;
    line-height: 1.4;
}

/* ── Report Notification Preferences ─────────────────────────────────── */
/* Each item = one of the 3 EFF report emails (Funding Confirmations,
   UNAI/VNAD, Follow Up). Item has a bold title, a muted helper line
   explaining when the report fires, and a list of email chips below. */
.acct-prop-notif-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.acct-prop-notif-item {
    background: #fafbfc;
    border: 1px solid #ececec;
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-left: 3px solid #1E6332;
}

.acct-prop-notif-head {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: -0.1px;
}

.acct-prop-notif-sub {
    font-size: 0.685rem;
    color: #6b7280;
    line-height: 1.35;
    margin: 1px 0 4px;
}

/* ── Request a Change ────────────────────────────────────────────────── */
.acct-prop-reqchange {
    background: linear-gradient(135deg, #F4F0E9 0%, #ede5d3 100%);
    border-radius: 0.625rem;
    padding: 0.75rem 0.875rem;
    margin: 0.75rem -0.25rem -0.25rem;
    border: 1px solid #e5e1da;
}

.acct-prop-reqchange .acct-prop-subhead {
    margin-top: 0;
}

.acct-prop-reqchange .acct-prop-help {
    margin-bottom: 0.625rem;
}

.acct-prop-reqchange-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border: 1.5px solid #1E6332;
    border-radius: 0.5rem;
    background: #fff;
    color: #1E6332;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.acct-prop-reqchange-btn:hover {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.25);
    transform: translateY(-1px);
}

.acct-prop-reqchange-btn i {
    font-size: 0.78rem;
}

.acct-prop-reqchange-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.acct-prop-reqchange-label {
    font-size: 0.78rem;
    color: #1f2937;
    font-weight: 500;
}

.acct-prop-reqchange-label strong {
    color: #1E6332;
    font-weight: 700;
}

.acct-prop-reqchange-textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid #d4ccbb;
    border-radius: 0.5rem;
    background: #fff;
    font-size: 0.85rem;
    line-height: 1.45;
    resize: vertical;
    min-height: 96px;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.acct-prop-reqchange-textarea:focus {
    outline: none;
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.15);
}

.acct-prop-reqchange-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.125rem;
}

.acct-prop-reqchange-cancel {
    padding: 0.45rem 0.875rem;
    border: 1px solid #d4ccbb;
    border-radius: 0.5rem;
    background: transparent;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.acct-prop-reqchange-cancel:hover {
    background: #fff;
    color: #1f2937;
    border-color: #c2b8a4;
}

.acct-prop-reqchange-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(30, 99, 50, 0.25);
}

.acct-prop-reqchange-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 99, 50, 0.35);
}

.acct-prop-reqchange-submit:disabled {
    opacity: 0.65;
    cursor: progress;
}

/* Fee details mini-row — Portal Rate + Min Fee side-by-side */
.acct-prop-fee-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    margin-top: 0.5rem;
}

.acct-prop-fee-tile {
    background: linear-gradient(135deg, #F4F0E9 0%, #ede5d3 100%);
    border: 1px solid #e5e1da;
    border-radius: 0.625rem;
    padding: 0.625rem 0.75rem;
}

.acct-prop-fee-tile-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6b7280;
}

.acct-prop-fee-tile-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1E6332;
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}

/* Empty-section state inside Property Info */
.acct-prop-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.85rem;
    font-style: italic;
}

.acct-prop-empty i {
    font-size: 1.5rem;
    color: #d1d5db;
    margin-bottom: 0.5rem;
    display: block;
}

/* Detail section card wrapper — used for KPI strip, Status Distribution,
   Financial Summary, Recent Claims. Gives each section the same chrome. */
.acct-section-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.04);
    padding: 1rem 1.125rem;
}

.acct-section-card .acct-detail-section-title {
    margin-bottom: 0.75rem;
}

.acct-section-card > .acct-detail-section-title:first-child {
    margin-top: 0;
}

.acct-section-card > .acct-detail-kpis {
    margin-bottom: 0;
}

.acct-section-card > .acct-detail-donut-wrap,
.acct-section-card > .acct-detail-ledger {
    box-shadow: none;
    background: transparent;
    border: none;
    padding: 0;
}

/* Re-apply background just for ledger so the bordered-box look is preserved
   even inside the wrapping section card. */
.acct-section-card > .acct-detail-ledger {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.85rem 1rem;
}

/* Mobile: full-screen the modal, kill rounded corners, show back button */
@media (max-width: 768px) {
    .acct-detail-panel {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }
    .acct-detail-panel.show {
        transform: none;
    }
    body.impersonating .acct-detail-panel {
        top: 32px;
        height: calc(100vh - 32px);
    }
    .acct-detail-back {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .acct-detail-close {
        display: none; /* back button replaces it on mobile */
    }
    .acct-detail-body {
        padding: 1rem;
    }
    .acct-prop-fee-row {
        grid-template-columns: 1fr;
    }
}