/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #ffffff; /* Set base background to white */
}

body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #ffffff; /* Changed to white background */
    padding-bottom: 60px; /* Space for fixed bottom nav */
}

/* Header */
.app-header {
    background-color: #ffffff; /* Changed to white background */
    color: #3f3f43; /* Dark text for white background */
    /* Use safe area for top padding, fallback to existing padding - Increased vertical padding */
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 15px 15px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Keep space between profile and icons */
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 50px; /* Ensure header has some height */
    border-bottom: 1px solid #e0e0e0; /* Add subtle border */
}

.profile-area {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Allow profile area to take available space */
}

.profile-pic-placeholder {
    width: 36px;
    height: 36px;
    background-color: #cccccc;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0; /* Prevent shrinking */
    /* Add border or other styles if needed */
}

/* Style for actual image if used later */
.profile-pic {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover; /* Ensure image covers the area */
    flex-shrink: 0;
    border: 1px solid #ffffff; /* Add thin white border */
}

/* Style for Initials Circle */
.profile-initials {
    width: 36px;
    height: 36px;
    background-color: #e0e0e0; /* Light gray background */
    border-radius: 50%; /* Circular */
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #181818; /* Dark text for initials */
    font-weight: bold;
    font-size: 0.9rem; /* Adjust size as needed */
    flex-shrink: 0; /* Prevent shrinking */
}

.greeting {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.greeting-hello {
    font-size: 0.9rem;
    font-weight: normal;
}

.user-name {
    font-size: 1.1rem; /* Slightly larger */
    font-weight: normal; /* Remove bold */
    color: #ffffff; /* Ensure it's white like the 'Hello,' */
}

/* Header title class removed */

.app-header .header-icons {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Prevent icons div from shrinking */
    gap: 15px; /* Added gap for spacing between icons */
}

.app-header .icon-button {
    background: none;
    border: none;
    color: #1b8cff; /* Blue icons in header */
    /* margin-left: 20px; */ /* Removed margin-left */
    cursor: pointer;
    padding: 0; /* Remove padding for icon buttons */
    line-height: 1; /* Ensure icon alignment */
}

.app-header .icon-button svg {
    fill: currentColor; /* Make SVG inherit button color (dark) */
    width: 1.25rem; /* Adjust size as needed */
    height: 1.25rem; /* Adjust size as needed */
    transition: opacity 0.2s ease; /* Add transition for smooth effect */
}

/* Hover state - Removed */
/* .app-header .icon-button:hover svg {
    opacity: 0.8; /* Slightly dim the icon on hover */
/* } */

/* Active state (while clicking) - Removed */
/* .app-header .icon-button:active svg {
    opacity: 0.6; /* Dim further when clicked */
/* } */

/* Focus state (for accessibility) */
.app-header .icon-button:focus {
    outline: 2px solid #1b6875; /* Teal focus outline for white background */
    outline-offset: 2px;
    border-radius: 50%; /* Match button shape if it were circular */
}

/* Optional: Remove default focus outline if custom is preferred */
.app-header .icon-button:focus-visible {
    outline: none; /* Remove default if using custom */
}

/* Main Content */
.app-content {
    flex-grow: 1; /* Allows main content to fill available space */
    padding: 20px 15px; /* Adjusted: Match header L/R padding */
    padding-top: calc(env(safe-area-inset-top, 0px) + 20px); /* Minimal spacing to clear header */
    background-color: #ffffff;
}

/* Nearby Customers */
.nearby-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.nearby-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}
.nearby-refresh-btn {
    background: #1b6875;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 12px;
    font-weight: bold;
    cursor: pointer;
}
.nearby-refresh-btn:focus { outline: 2px solid #15535e; outline-offset: 2px; }
.nearby-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nearby-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 8px;
}
.nearby-item-left { display: flex; align-items: center; gap: 12px; }
.nearby-initials {
    width: 36px; height: 36px; border-radius: 50%;
    background: #e0e0e0; color: #181818; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* Hide profile/initials circles on cards/lists */
.nearby-initials,
.item-initials-circle,
.mortgage-card-initials-circle {
    display: none !important;
}
.nearby-name { font-weight: 700; color: #3f3f43; }
.nearby-meta { font-size: 0.85rem; color: #5e5e5e; }
.nearby-distance { font-weight: 600; color: #1b6875; }

/* Map container in Nearby */
.nearby-map-wrapper { 
    background: #ffffff; 
    border: 1px solid #e0e0e0; 
    border-radius: 8px; 
    overflow: hidden; 
    position: relative;
    z-index: 1; /* Ensure map stays behind header (z-index: 100) */
}
.nearby-map { 
    width: 100%; 
    height: 260px; 
    position: relative;
    z-index: 1; /* Ensure map content stays behind header */
}
.nearby-radius-controls { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.nearby-radius-select { background: #ffffff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px; color: #3f3f43; }
.nearby-location-btn { background: #1b8cff; color: #ffffff; border: none; border-radius: 6px; padding: 10px 12px; font-weight: bold; cursor: pointer; }
.nearby-location-btn:focus { outline: 2px solid #1b6875; outline-offset: 2px; }

/* Map marker icons */
.fo-star-icon {
    width: 28px;
    height: 28px;
    display: block;
}

/* Ensure Leaflet map elements stay behind header */
.nearby-map-wrapper .leaflet-container {
    z-index: 1 !important;
}

.nearby-map-wrapper .leaflet-popup {
    z-index: 2 !important; /* Popups can be slightly higher than map but still below header */
}

.nearby-map-wrapper .leaflet-control-container {
    z-index: 1 !important;
}

/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f0f0f0; /* MODIFIED: Light gray background */
    display: flex;
    justify-content: space-around;
    align-items: stretch; /* Make items fill height */
    /* Adjust height and padding to account for safe area */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(env(safe-area-inset-bottom, 0px) + 60px);
    z-index: 100;
    border-top: 1px solid #cccccc; /* ADDED: Subtle top border for separation */
}

.bottom-nav .nav-item {
    background: none;
    border: none;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0 5px 0;
    color: #3f3f43; /* MODIFIED: Dark gray for icon/text */
    text-decoration: none;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease; /* ADDED: color transition */
}

.bottom-nav .nav-icon {
    margin-bottom: 4px;
    line-height: 1;
}

.bottom-nav .nav-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor; /* Icon color will inherit from .nav-item */
}

.bottom-nav .nav-item.active {
    color: #1b8cff; /* Blue color to match header icons */
    background-color: #e0e0e0; /* Slightly darker gray for active background */
    border-radius: 0; /* Remove border-radius for full tab highlight if preferred, or keep for pill */
}

/* Quick Actions Styling */
.quick-actions {
    display: flex;
    justify-content: space-around;
    align-items: flex-start; /* Align items to the top */
    padding: 5px 0 15px 0; /* Reduced top padding, kept bottom */
    /* margin-bottom removed, handled by hr */
}

.quick-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 60px; /* Give items a fixed width */
    color: #333; /* Default text color */
}

.quick-action-icon-bg {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    /* Background color set inline via style attribute in JS */
}

.quick-action-icon-bg svg {
    fill: #ffffff; /* White icons */
    /* Size adjusted by slds-icon_small in HTML */
    width: 1.25rem; /* Fallback/override size */
    height: 1.25rem;
}

.quick-action-label {
    font-size: 0.7rem;
    line-height: 1.2;
    /* Ensure text wraps if needed */
    word-wrap: break-word;
    white-space: normal;
}

/* Section Divider */
.section-divider {
    border: none; /* Remove default border */
    height: 1px; /* Set thickness */
    background-color: #dddbda; /* SLDS light grey color */
    margin: 0 1rem 1rem 1rem; /* No top margin, horizontal/bottom margin (using SLDS token values conceptually) */
}

/* Opportunities Carousel */
.opportunities-section {
    /* Uses SLDS margin classes */
}

.opportunities-title {
    font-size: 1rem; /* Adjust size */
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.opportunities-carousel {
    display: flex;
    overflow-x: auto;
    padding-bottom: 15px; /* Space for scrollbar or just visual */
    /* Hide scrollbar aesthetically */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

.opportunities-carousel::-webkit-scrollbar {
    height: 4px;
}

.opportunity-card {
    flex: 0 0 280px; /* Fixed width for each card, adjust as needed */
    background-color: #f3f2f2; /* SLDS light grey */
    border-radius: 8px; /* Rounded corners */
    margin-right: 15px; /* Space between cards */
    position: relative;
    overflow: hidden; /* Hide overflowing corner */
    border: 1px solid #1b6875; /* Teal border */
}

.opportunity-card:last-child {
    margin-right: 0;
}

.card-content {
    padding: 15px;
}

.card-type {
    font-size: 0.75rem;
    color: #5e5e5e; /* Medium grey */
    margin-bottom: 2px;
    text-transform: uppercase;
}

.card-name {
    min-height: 3.2em; /* Reserve space for 2 lines, even for long names */
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #1b6875;
    display: flex;
    align-items: flex-start;
}

.card-amount-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items to top */
    margin-bottom: 10px;
}

.card-amount-label {
    font-size: 0.75rem;
    color: #5e5e5e;
    margin-bottom: 2px;
}

.card-amount-value {
    font-size: 1.25rem;
    font-weight: bold;
    color: #1b6875; /* Primary teal */
}

.card-view-button {
    border: 1px solid #888888 !important;
    border-radius: 4px;
    background-color: #ffffff;
    color: #0070d2;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    box-sizing: border-box;
}

.card-view-button:focus,
.card-view-button:active {
    border: 1px solid #888888 !important;
    outline: none;
    box-shadow: 0 0 0 2px #e0e0e0;
}

.card-status-button {
    display: inline-block;
    width: 100%; /* Make button full width */
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid; /* Border color set inline */
    margin-bottom: 15px;
    cursor: pointer;
    /* Colors set inline */
}

.card-contacts {
    /* Container for contact items */
}

.card-contact-item {
    border: 1px solid #dddbda; /* Match renewals card border */
    border-radius: 8px; /* Match renewals card border radius */
    background-color: #eaeaeb; /* Keep existing background */
    display: flex;
    align-items: center;
    padding: 8px 10px;
    margin-bottom: 8px;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.card-contact-item:last-child {
    margin-bottom: 0;
}

/* Remove background circle styles */
.contact-icon-wrapper {
    width: 24px; /* Restore fixed size */
    height: 24px; /* Restore fixed size */
    border-radius: 50%; /* Restore circular shape */
    /* background-color removed */
    border: 1px solid #1b6875; /* Add teal border */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    flex-shrink: 0;
}

.contact-icon-wrapper svg {
    fill: #1b6875; /* Primary teal icon */
    /* Size adjusted by slds-icon_x-small */
    width: 1rem; /* Explicit size */
    height: 1rem;
}

.contact-details {
    display: flex;
    flex-direction: column;
}

.contact-name {
    font-size: 0.85rem;
    font-weight: bold;
    color: #1b6875; /* Primary teal */
}

.contact-role {
    font-size: 0.75rem;
    color: #5e5e5e;
}

/* Removed .card-corner-color rule */
/*
.card-corner-color {
    position: absolute;
    bottom: -25px; 
    right: -25px;  
    width: 50px;  
    height: 50px;
    transform: rotate(45deg);
}
*/

/* Basic Responsiveness */
@media (min-width: 768px) {
    /* Desktop styles - maybe center content, limit width? */
    body {
        padding-bottom: 0; /* Remove padding if nav changes */
    }
    .app-header {
        padding: 10px 15px; /* Reset padding */
    }
    .app-content {
        max-width: 960px;
        margin: 0 auto;
        padding: 30px;
    }
    .bottom-nav {
        padding-bottom: 0; /* Reset padding */
        height: auto; /* Reset height */
        position: relative;
        background-color: #1b6875;
        justify-content: flex-start;
        padding: 10px 20px;
    }
     .bottom-nav .nav-item {
         flex-direction: row;
         font-size: 1rem;
         padding: 10px 15px;
         margin-right: 10px;
         border-radius: 5px;
     }
     .bottom-nav .nav-icon {
         margin-bottom: 0;
         margin-right: 8px;
         line-height: 1;
     }
      .bottom-nav .nav-icon svg {
         width: 1.2rem; /* Adjust size for desktop */
         height: 1.2rem; /* Adjust size for desktop */
         fill: currentColor;
     }
} 

/* List Sections (Renewals/Delinquencies) */
.list-sections {
    margin-top: 20px; /* Space above the first list section */
}

.list-section {
    margin-bottom: 20px; /* Space between sections */
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.section-title {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
}

.see-all-link {
    font-size: 0.9rem;
    color: #1b6875; /* Primary Teal */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.item-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-item {
    background-color: #f3f2f2; /* SLDS light grey */
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #dddbda; /* SLDS border color */
    overflow: hidden; /* Ensure details don't overflow radius */
}

.item-summary {
    display: flex;
    align-items: center;
    padding: 15px;
    cursor: pointer; /* Make summary clickable for toggle */
}

.item-initials-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #e0e0e0; /* Default background */
    color: #181818; /* Dark text */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    margin-right: 15px;
    flex-shrink: 0;
}

.item-icon-circle {
    background-color: white;
    border: 2px solid #d72c2c; /* Default red border for warning icons */
    display: flex !important; /* Override the display: none rule */
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* Warning icon styling (red) */
.item-icon-circle svg {
    fill: #d72c2c; /* Red for warning icons */
    width: 16px;
    height: 16px;
    display: block !important; /* Ensure SVG is visible */
}

/* Warning icon specific styling */
.renewal-item[data-icon="warning"] .item-icon-circle,
.delinquency-item[data-icon="warning"] .item-icon-circle {
    border-color: #d72c2c;
}

.renewal-item[data-icon="warning"] .item-icon-circle svg,
.delinquency-item[data-icon="warning"] .item-icon-circle svg {
    fill: #d72c2c;
}

/* Clock icon specific styling */
.renewal-item[data-icon="clock"] .item-icon-circle,
.delinquency-item[data-icon="clock"] .item-icon-circle {
    border-color: #d4af64; /* More yellow brown */
}

.renewal-item[data-icon="clock"] .item-icon-circle svg,
.delinquency-item[data-icon="clock"] .item-icon-circle svg {
    fill: #d4af64; /* More yellow brown */
}

.item-info {
    flex-grow: 1; /* Take available space */
    line-height: 1.3;
}

.item-name {
    font-weight: bold;
    font-size: 0.9rem;
    color: #181818;
    display: block; /* Ensure it takes its own line */
    margin-bottom: 2px;
}

.item-subinfo {
    font-size: 0.8rem;
    color: #5e5e5e;
    /* Color for days set inline */
}

.item-toggle {
    color: #5e5e5e; /* Chevron color */
    margin-left: 10px;
    flex-shrink: 0;
}

.item-details {
    display: none; /* Hidden by default */
    padding: 15px 15px 15px 15px; /* Added top padding (was 0) */
    border-top: 1px solid #dddbda;
    margin-top: -1px; /* Overlap border slightly */
    background-color: #ffffff; /* White background for details */
}

.list-item.expanded .item-details {
    display: block;
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: 10px 15px; /* Row and column gap */
    font-size: 0.85rem;
    color: #333;
    margin-bottom: 15px;
}

.details-grid span {
    line-height: 1.3;
}

.details-grid span:nth-child(odd) {
    /* Style for labels if needed */
    color: #5e5e5e;
}
.details-grid span:nth-child(even) {
    /* Style for values if needed */
    text-align: right;
    /* font-weight: bold; */ /* Removed - handled by specific class now */
}

/* Styles for individual grid items */
.detail-item {
    /* Inherits grid gap */
    line-height: 1.4; /* Adjust line height */
    font-size: 0.8rem; /* Slightly smaller base font for details */
    color: #5e5e5e; /* Default label color */
}

.detail-item-right {
    text-align: right;
}

/* Class for specifically bolded values */
.detail-value-bold {
    font-weight: bold;
    color: #181818; /* Darker color for bold values */
    font-size: 0.85rem; /* Slightly larger for bold values */
}

.contact-client-button {
    width: 100%;
    margin-top: 15px; /* Increased top margin */
    background-color: #1b6875; /* Primary Teal */
    color: white;
    font-weight: bold;
    padding: 10px 15px; /* Adjust padding */
    border: none;
    border-radius: 6px; /* Match other radii */
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.contact-client-button:hover {
     background-color: #16525c; /* Darker teal on hover */
}

/* Action Sheet Styling */
.action-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - (env(safe-area-inset-bottom, 0px) + 60px));
    background-color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    z-index: 999; /* MODIFIED: Was 1500, now lower than .slide-panel */
}

.action-sheet-overlay.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.action-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f9f9f9; /* Light grey, similar to iOS */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    padding: 15px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 15px); /* Account for safe area */
    z-index: 1001;
    transform: translateY(100%); /* Start offscreen */
    transition: transform 0.3s ease-out;
    max-height: 70vh; /* Limit height */
    overflow-y: auto; /* Allow scrolling if content overflows */
}

.action-sheet.visible {
    transform: translateY(0); /* Slide into view */
}

/* Optional: Handle bar like iOS */
.action-sheet-handle {
    width: 40px;
    height: 5px;
    background-color: #cccccc;
    border-radius: 2.5px;
    margin: 0 auto 15px auto; /* Center and add space below */
}

.action-sheet-title {
    font-size: 0.9rem;
    color: #555;
    text-align: center;
    margin-bottom: 15px;
    font-weight: bold;
}

.action-sheet-grid {
    display: flex; /* Use flexbox for horizontal layout */
    justify-content: space-around; /* Distribute items */
    flex-wrap: wrap; /* Allow wrapping if many items */
    margin-bottom: 15px; /* Space below icon grid */
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0; 
}

.action-sheet-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    width: 70px; /* Fixed width for grid items */
}

.action-sheet-grid-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px; /* Squarish rounded corners */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    background-color: #e0e0e0; /* Placeholder bg */
}

.action-sheet-grid-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #1b6875;
}

.action-sheet-grid-label {
    font-size: 0.7rem;
    color: #333;
}

.action-sheet-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.action-sheet-list-item {
    background-color: #ffffff;
    border-radius: 8px;
    margin-bottom: 8px;
}

.action-sheet-list-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 15px;
    background: none;
    border: none;
    text-align: left;
    font-size: 1rem;
    color: #007aff; /* iOS blue */
    cursor: pointer;
}

.action-sheet-list-button:hover {
    background-color: #f0f0f0;
}

.action-sheet-list-icon {
    width: 20px;
    height: 20px;
    fill: #555;
}

/* Basic Responsiveness */
@media (min-width: 768px) {
    /* Desktop styles - maybe center content, limit width? */
    body {
        padding-bottom: 0; /* Remove padding if nav changes */
    }
    .app-header {
        padding: 10px 15px; /* Reset padding */
    }
    .app-content {
        max-width: 960px;
        margin: 0 auto;
        padding: 30px;
    }
    .bottom-nav {
        padding-bottom: 0; /* Reset padding */
        height: auto; /* Reset height */
        position: relative;
        background-color: #1b6875;
        justify-content: flex-start;
        padding: 10px 20px;
    }
     .bottom-nav .nav-item {
         flex-direction: row;
         font-size: 1rem;
         padding: 10px 15px;
         margin-right: 10px;
         border-radius: 5px;
     }
     .bottom-nav .nav-icon {
         margin-bottom: 0;
         margin-right: 8px;
         line-height: 1;
     }
      .bottom-nav .nav-icon svg {
         width: 1.2rem; /* Adjust size for desktop */
         height: 1.2rem; /* Adjust size for desktop */
         fill: currentColor;
     }
} 

/* Mortgage Opportunities Carousel */
.mortgage-opportunities-section {
     /* Uses SLDS margin classes */
     /* Add specific margins if needed */
    margin-top: 1rem; /* Add some space above the section */
}

.mortgage-opportunities-title {
    font-size: 1rem; /* Match pending opp title size */
    font-weight: 600; /* Semi-bold */
    color: #333; /* Changed from greyish-blue to standard dark grey */
    margin-bottom: 10px;
}

.mortgage-opportunities-carousel {
    display: flex;
    overflow-x: auto;
    padding-bottom: 10px; /* Space for scrollbar */
    gap: 10px; /* Space between cards */
     /* Hide scrollbar visually but allow scrolling */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.mortgage-opportunities-carousel::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

.mortgage-opportunity-card {
    background-color: #f3f2f2;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #dddbda;
    padding: 15px;
    width: 160px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.contact-status-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.contact-status-indicator svg {
  width: 18px;
  height: 18px;
  display: block;
}

.mortgage-card-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content */
    text-align: center;
}

.mortgage-card-initials-wrapper {
    margin-bottom: 10px;
}

.mortgage-card-initials-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e0e5ee; /* Light grey background */
    color: #1b6875; /* Primary teal text */
    font-weight: 600;
    font-size: 0.9rem;
}

.mortgage-card-name {
    font-weight: bold;
    color: #333;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.mortgage-card-details {
    font-size: 0.8rem;
    color: #555;
}

/* Corner Graphics */
.mortgage-card-corner-graphic-1,
.mortgage-card-corner-graphic-2 {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: -25px; /* Position half outside */
    right: -25px; /* Position half outside */
}

.mortgage-card-corner-graphic-1 {
    background-color: #1b6875; /* Teal */
    z-index: 1;
}

.mortgage-card-corner-graphic-2 {
    background-color: #87c540; /* Lime Green */
    transform: translate(-15px, 5px); /* Offset the green slightly */
    z-index: 2;
}

/* Optional: Specific card hover/focus if needed */

.opportunity-card {
}

/* Mortgage Opportunities List Carousel */
.mortgage-list-section {
    margin-top: 1rem; /* Space above the section */
}

.mortgage-list-title {
    font-size: 1rem; 
    font-weight: 600; 
    color: #333; 
    margin-bottom: 10px;
    /* padding-left: 1rem; */ /* Removed - handled by parent margin */
}

.mortgage-list-carousel {
    display: flex;
    overflow-x: auto;
    padding-bottom: 10px; 
    gap: 10px; 
    scrollbar-width: none; 
    -ms-overflow-style: none;  
    /* padding-left: 1rem; */ /* Removed - handled by parent margin */
    /* padding-right: 1rem; */ /* Removed - handled by parent margin */
    /* Clip content that overflows padding */
    clip-path: inset(0 0 0 0);
}

.mortgage-list-carousel::-webkit-scrollbar {
    display: none; 
}

.mortgage-list-card {
    background-color: #f3f2f2; /* Match other cards */
    border-radius: 8px;
    border: 1px solid #dddbda; /* Match other cards */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    padding: 15px;
    width: 280px; /* Match pending opp card width */
    flex-shrink: 0; 
}

.mortgage-list-card-content {
    /* Container for card content */
}

.mortgage-list-card-name {
    font-weight: bold;
    font-size: 0.9rem;
    color: #181818;
    display: block; 
    margin-bottom: 2px;
}

.mortgage-list-card-days {
    font-size: 0.8rem;
    font-weight: bold; 
    display: block;
    margin-bottom: 10px;
    /* Color set inline */
}

.mortgage-list-card-separator {
    border: none;
    height: 1px;
    background-color: #dddbda; /* SLDS border color */
    margin: 0 0 10px 0; /* Margin below separator */
}

/* Reusing details-grid styling with minor adjustments */
.mortgage-list-card-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 8px 15px; /* Slightly smaller row gap */
    font-size: 0.8rem; /* Match detail item font size */
    color: #5e5e5e; /* Match detail item label color */
}

/* Ensure grid spans inherit correct styles */
.mortgage-list-card-details-grid span {
    line-height: 1.3;
}

/* Reuse existing classes for alignment and bolding */
/* .detail-item-right */
/* .detail-value-bold */ 

/* --- Login Screen Styles --- */
#login-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: #1b6875; Match header/nav */
    /* background: linear-gradient(to bottom right, #1b6875, #54c6eb); Teal gradient */
    /* background: linear-gradient(to bottom right, #103c45, #1b6875); Darker to primary teal gradient */
    background: linear-gradient(-50deg, #103c45 0%, #1b6875 50%, #103c45 100%); /* Angle updated to -50deg */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 2000; /* Ensure it's above everything */
    transition: opacity 0.5s ease-out;
}

.login-logo {
    max-width: 150px; /* Adjust size as needed */
    margin-bottom: 30px;
}

/* Login update banner */
.login-update-banner {
    width: 100%;
    max-width: 320px;
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    text-align: center;
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.login-update-banner {
    position: relative;
}
.login-update-text {
    display: inline-block;
    padding-right: 28px; /* space for close */
}
.login-update-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.login-update-close:focus {
    outline: 2px solid #1b6875;
    outline-offset: 2px;
}

.login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 300px;
}

.login-input {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid #ffffff;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 1rem;
    text-align: center;
}

.login-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.login-button {
    width: 100%;
    padding: 12px 15px;
    background-color: #ffffff;
    color: #1b6875; /* Teal text */
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.login-button:hover {
    background-color: #f0f0f0;
}

.login-error-message {
    color: #f7caac; /* Light orange/peach for errors */
    font-size: 0.9rem;
    margin-top: 10px;
    height: 1.2em; /* Reserve space even when empty */
    text-align: center;
}

/* Utility class to hide elements */
.hidden {
    display: none !important;
}

/* Simple shake animation for login error */
.shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* --- End Login Screen Styles --- */

/* Context text below login form */
.login-context {
    margin-top: 30px; /* Space above the context text */
    max-width: 320px; /* Slightly wider than form */
    text-align: center;
    color: rgba(255, 255, 255, 0.8); /* Slightly dimmer white */
    font-size: 1.0rem; /* Increased further from 0.9rem for mobile */
    line-height: 1.4;
}

.login-context p {
    margin-bottom: 10px;
}

.login-context .legal-notice {
    font-size: 0.9rem; /* Increased further from 0.8rem */
    color: rgba(255, 255, 255, 0.6); /* Dimmer */
    margin-top: 15px; /* More space before legal */
}

/* Slide-in panel overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - (env(safe-area-inset-bottom, 0px) + 60px));
    background-color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    z-index: 999; /* Lower than .slide-panel */
}
.overlay.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Full-screen slide panel for client modal (slides from right) */
.slide-panel {
    position: fixed;
    top: 0;
    right: -100%; /* Initially off-screen */
    width: 100%;
    height: auto; 
    bottom: calc(env(safe-area-inset-bottom, 0px) + 60px); 
    background-color: #ffffff; 
    z-index: 1000; 
    overflow-y: auto; 
    transition: right 0.3s ease-in-out;
    display: flex; 
    flex-direction: column; 
}

.slide-panel.visible {
    right: 0;
}

.slide-panel-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0;
    min-height: 0;
}

.financial-info-header {
    background: #ffffff;
    color: #3f3f43;
    padding: 0 16px; /* Vertical padding handled by min-height and align-items */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes back/name group and icons apart */
    min-height: 56px; 
    position: sticky;
    top: 0;
    z-index: 10; 
    border-bottom: 2px solid #1b6875; /* Teal divider to match Accounts header */
}

.financial-info-back-name-group {
    display: flex;
    align-items: center;
}

.financial-info-header .icon-button {
    color: #1b8cff; 
    padding: 4px; /* ADDED: Match account-modal .icon-btn padding */
    /* margin-right: 16px; -- Remove this, apply to group or specific buttons if needed */
}

.financial-info-header .icon-button svg { /* ADDED: Explicit size for these icons */
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Specifically for the back button in this header */
#financial-info-back {
    margin-right: 8px; /* Space between back button and client name */
}

.financial-info-client-name {
    font-size: 1rem; /* MODIFIED: Was 1.1rem */
    font-weight: normal; /* MODIFIED: Was bold */
}

/* The .header-icons class (reused from main app header) should provide spacing for those icons */
/* .financial-info-header .header-icons { ... } */

/* Log Activity section specific to financial info panel */
.financial-info-log-activity-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 32px; /* Space around single Log Activity */
    margin-bottom: 12px;
    position: sticky;
    top: 56px;
    background-color: #ffffff; /* Match header background like Home */
    z-index: 9;
    width: 100%;
    padding: 12px 0;
}

/* Remove .loan-indicator as it was removed from HTML for now */
/*
.loan-indicator {
    font-size: 0.9rem;
}
*/

.financial-info-content {
    flex-grow: 1;
    overflow-y: auto; 
    padding: 16px;
    /* Consider adjusting padding-top if content starts too high/low due to the two sticky headers */
}

.financial-info-content-title {
    font-size: 1.2rem; 
    font-weight: bold;
    color: #3f3f43; 
    margin-bottom: 16px;
    text-align: center; 
    margin-top: -10px; /* ADDED: To move text up */
}

/* Client Modal Styles */
.client-modal-header {
    position: relative;
    background: #e9eaf3;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    padding: 24px 16px 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 260px;
}
.client-modal-back {
    position: absolute;
    top: 18px;
    left: 12px;
    background: none;
    border: none;
    padding: 8px 18px 8px 8px;
    min-width: 64px;
    min-height: 44px;
    border-radius: 22px;
    cursor: pointer;
    z-index: 10; /* Ensure on top */
    display: flex;
    align-items: center;
    width: max-content;
    height: 44px;
    pointer-events: auto;
    transition: background 0.15s;
}
.client-modal-back > span {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Let button handle events */
}
.client-modal-back:focus, .client-modal-back:hover {
    background: rgba(27, 104, 117, 0.08);
    outline: none;
}
.client-modal-notes {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #1b6875; /* Primary Teal */
    color: #ffffff; /* White */
    border: none;
    padding: 6px 14px;
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.client-modal-notes:hover {
    background: #15535e; /* Darker teal on hover */
}

.client-modal-camera {
    position: absolute;
    top: 18px;
    right: 12px;
    background: none;
    border: none;
    padding: 4px;
    border-radius: 50%;
    cursor: pointer;
}
.client-modal-initials {
    margin-top: 32px;
    width: 64px;
    height: 64px;
    background: #d3d6e2;
    color: #6b6b6b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 12px;
}
.client-modal-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #222;
    margin-bottom: 2px;
    text-align: center;
}
.client-modal-email {
    font-size: 0.95rem;
    color: #4b5e2e;
    margin-bottom: 14px;
    text-align: center;
}
.client-modal-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}
.client-modal-action-btn {
    background: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 18px 7px 10px;
    font-size: 0.95rem;
    color: #4b5e2e;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    cursor: pointer;
}

/* Quick Actions */
.client-modal-quick-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 24px 16px 0 16px;
}
.client-modal-quick-tile {
    flex: 1;
    background: #fff;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 0 10px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    min-width: 0;
}
.client-modal-quick-tile svg {
    margin-bottom: 8px;
    width: 32px;
    height: 32px;
    display: block;
}
.client-modal-quick-tile-label {
    font-size: 0.95rem;
    color: #222;
    font-weight: 500;
    text-align: center;
}

/* Topics Section */
.client-modal-topics-section {
    margin: 32px 0 0 0;
    padding: 0 0 32px 0;
}
.client-modal-topics-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #444;
    margin: 0 0 12px 20px;
}
.client-modal-topic-list {
    list-style: none;
    padding: 0 0 0 0;
    margin: 0;
}
.client-modal-topic-item {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    margin: 0 16px 12px 16px;
    padding: 14px 12px 14px 12px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: background 0.12s;
    outline: none;
}
.client-modal-topic-item:active,
.client-modal-topic-item:focus {
    background: #f3f2f2;
}
.client-modal-topic-icon {
    margin-right: 14px;
    flex-shrink: 0;
}
.client-modal-topic-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.client-modal-topic-title {
    font-size: 1rem;
    font-weight: 500;
    color: #222;
}
.client-modal-topic-desc {
    font-size: 0.92rem;
    color: #6b6b6b;
}
.client-modal-topic-dot {
    width: 8px;
    height: 8px;
    background: #e74c3c;
    border-radius: 50%;
    margin-left: 8px;
    margin-right: 8px;
    display: inline-block;
}
.client-modal-topic-item:nth-child(1) .client-modal-topic-dot {
    display: inline-block;
}
.client-modal-topic-item:not(:nth-child(1)) .client-modal-topic-dot {
    display: none;
}
.client-modal-topic-chevron {
    margin-left: 8px;
    color: #b0b0b0;
    display: flex;
    align-items: center;
}
.client-modal-topic-chevron svg {
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
}

@media (min-width: 600px) {
    .slide-panel {
        max-width: 420px;
        left: 50%;
        transform: translateX(100%) translateX(-50%);
    }
    .slide-panel.visible {
        transform: translateX(0) translateX(-50%);
    }
}

/* Account List Styles */
.account-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.account-list-item {
    display: flex;
    align-items: center;
    /* background: #f3f2f2; */ /* Removed background color */
    /* border-radius: 8px; */ /* Removing border-radius for full-width line effect */
    margin-bottom: 0; /* Remove bottom margin to make lines connect */
    padding: 15px 12px;
    cursor: pointer;
    /* border: 1px solid #dddbda; */ /* Removed border */
    border-bottom: 1px solid #e0e0e0; /* Add bottom border for separation */
    transition: background 0.15s;
    outline: none;
}

.account-list-item:last-child {
    border-bottom: none; /* Remove border from the last item */
}

.account-list-item:active,
.account-list-item:focus {
    background: #e0e0e0; /* Keep a subtle background for interaction state */
}

/* .account-initials-circle REMOVED */

.account-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px; /* Add some space between lines */
}
.account-name-main { /* New style for the main account name */
    font-weight: bold;
    font-size: 1.1rem; /* Larger font size */
    color: #3f3f43; /* Dark text */
    margin-bottom: 4px; /* Space below name */
}
.account-detail-line { /* New style for additional detail lines */
    font-size: 0.9rem;
    color: #5e5e5e; /* Medium grey */
    display: flex; /* To align label and value if needed, or just for block display */
    line-height: 1.4;
}
.account-detail-label {
    font-weight: normal;
    margin-right: 0.25em; /* Space between label and value */
    color: #5e5e5e; /* Medium grey for label */
}
.account-detail-value {
    font-weight: normal;
    color: #3f3f43; /* Darker text for value */
}
.account-chevron {
    margin-left: 10px;
    color: #b0b0b0;
    display: flex;
    align-items: center;
}
.account-chevron svg {
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
}

/* New Accounts Specific Header Styles */
.accounts-header-section {
    display: flex; /* Use flex to manage layout */
    flex-direction: column; /* Stack title/button row and search row */
    width: 100%; /* Take full width */
    padding: 0; /* Removed 5px horizontal padding to align with bell */
}

/* Home header uses same visual rules */
#home-header .accounts-header-top-row .accounts-title { color: #3f3f43; }
#nearby-header .accounts-header-top-row .accounts-title { color: #3f3f43; }

/* Home header label: no underline; separator handled on header element */
#home-header .accounts-title {
    display: inline-block;
    padding-bottom: 0;
    border-bottom: none;
}

/* When viewing Home, show a teal separator line under the entire header */
.app-header.home-divider-teal {
    border-bottom: 2px solid #1b6875;
}

/* Same teal separator for Accounts view */
.app-header.accounts-divider-teal {
    border-bottom: 2px solid #1b6875;
}

.accounts-header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 8px; /* Space between title/button and search bar */
}

.accounts-title {
    font-size: 1.4rem; /* Prominent but not too large */
    font-weight: bold;
    color: #3f3f43; /* Dark text for white background */
    margin: 0; /* Remove default margins */
}

.new-account-button {
    background: none;
    border: none;
    color: #1b8cff; /* Blue color for New button */
    font-size: 1rem; /* Readable size */
    font-weight: normal; /* Not bold, to differentiate from title */
    cursor: pointer;
    padding: 5px 10px; /* Some padding for easier clicking */
}

.accounts-search-container {
    width: 100%;
    margin-bottom: 15px; /* Add space below search bar */
}

.accounts-search-container .slds-form-element {
    margin-bottom: 0; /* Remove default bottom margin if any from SLDS */
}

.accounts-search-container .slds-input {
    background-color: #f7f7f7; /* Light gray background */
    border-color: #e0e0e0; /* Light border */
    color: #3f3f43; /* Dark text */
}

.accounts-search-container .slds-input::placeholder {
    color: #5e5e5e; /* Medium gray placeholder text */
}

.accounts-search-container .slds-input__icon {
    fill: #5e5e5e; /* Medium gray search icon */
}

/* When Accounts tab is active, stack header items */
.app-header.accounts-header-active {
    flex-direction: column;
    align-items: stretch; /* Make children like accounts-header-section take full width */
    padding-bottom: 14px; /* Add a bit more padding at the bottom of the entire header block */
}

/* Ensure the original top row (profile + icons) keeps its flex behavior */
.app-header.accounts-header-active > .profile-area,
.app-header.accounts-header-active > .header-icons {
    /* These elements are part of the first visual row. 
       profile-area has flex-grow:1, header-icons has flex-shrink:0.
       They are direct children that will be part of the main row if app-header is row-flex.
       If app-header is column-flex, we might need to wrap them in a div to maintain their row layout,
       or adjust how app-header distributes space. 
       For now, let's assume they are still direct children and will form the first row items.
       The .app-header itself is already display:flex and justify-content: space-between by default.
       When it becomes column, we want the first conceptual "row" (profile + icons) to still layout correctly.
    */
}

/* The accounts-header-section will be the second item in the column flow */
.app-header.accounts-header-active > #accounts-header {
    margin-top: 12px; /* Space between profile row and Accounts header */
}

/* Space between profile row and Home header */
.app-header.accounts-header-active > #home-header {
    margin-top: 12px;
}

/* New wrapper for the main header content (profile + icons) */
.main-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ensure it takes full width of its parent */
}

/* --- Account Filter Icons Section --- */
.accounts-filter-icons-container {
    position: sticky;
    top: 0;
    z-index: 90;
    background-color: #f7f7f7;
    width: calc(100% + 30px); /* 15px left + 15px right header padding */
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: -8px;
    padding: 12px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
    justify-content: center;
}

.accounts-filter-icons-inner {
    display: flex;
    justify-content: space-around;
    width: 80%;
    /* max-width: 400px; */ /* Remove max-width for full width background */
    max-width: none;
}

.filter-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #555555;
}

.filter-icon-circle {
    width: 40px;
    height: 40px;
    background-color: #555555; /* MODIFIED: Darker gray background */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.filter-icon-circle svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #f7f7f7; /* MODIFIED: Dark gray icon graphic */
}

.filter-icon-label {
    font-size: 0.9rem;
    color: #3f3f43;
    font-weight: normal;
    text-align: center;
}

/* --- Account Modal Redesign --- */
.account-modal-header {
    background: #ffffff;
    color: #3f3f43;
    padding: 0; /* Adjusted from padding: 0 0 0 0 */
    position: sticky; /* MODIFIED */
    top: 0; /* MODIFIED */
    z-index: 10; /* MODIFIED */
    display: flex;
    flex-direction: column;
    min-height: unset;
}

/* .account-modal-header-row and .account-modal-title-row define the header's height.
   - .account-modal-header-row has min-height: 48px.
   - .account-modal-title-row contains the title (approx 22px text + 8px bottom padding = ~30-38px).
   - Total estimated header height is ~86px.
*/

.account-modal-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 0 0;
    min-height: 48px;
    width: 100%;
}
.account-modal-back {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: #1b8cff;
    font-size: 1rem;
    font-weight: 500;
    padding: 0 16px 0 0;
    height: 48px;
    cursor: pointer;
}
.account-modal-back svg {
    fill: #3f3f43;
    margin-right: 6px;
    width: 20px;
    height: 20px;
}
.account-modal-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.icon-btn {
    background: none;
    border: none;
    color: #1b8cff;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.icon-btn svg {
    fill: currentColor; /* Make modal header icons blue via parent color */
    width: 20px;
    height: 20px;
}
.account-modal-title-row {
    width: 100%;
    padding: 0 0 8px 16px;
    background: #ffffff;
    border-bottom: 2px solid #1b6875; /* Teal separator like Home */
}
.account-modal-title {
    font-size: 1.35rem;
    font-weight: bold;
    color: #3f3f43;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.account-modal-body {
    background: #fff;
    /* padding: 64px 0 24px 0; */ /* Original padding */
    padding: 0 0 24px 0; /* MODIFIED: Removed top padding as sticky elements handle spacing now */
}
.log-activity-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 40px; /* Space between Notes and Log Activity */
    margin-bottom: 12px;
    position: sticky;
    top: 56px;
    background-color: #ffffff; /* Match header background like Home */
    z-index: 9;
    width: 100%;
    padding: 12px 0;
}
.log-activity-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
.log-activity-btn {
    background: none;
    border: none;
    border-radius: 0;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
}
.log-activity-btn svg {
    width: 2rem;
    height: 2rem;
    fill: #3aa17e; /* Greenish for Log Activity */
    display: block;
}
.log-activity-label {
    color: #3f3f43;
    font-size: 0.9rem;
    font-weight: normal;
    text-align: center;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    letter-spacing: 0;
}

.account-summary-card {
    background: #f6f7fa;
    border-radius: 10px;
    margin: 0 16px 18px 16px;
    padding: 18px 16px 12px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.account-summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.account-summary-icon {
    background: #e0e0e0;
    border-radius: 8px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.account-summary-icon svg {
    width: 28px;
    height: 28px;
    fill: #1b6875;
}
.account-summary-label {
    color: #5e5e5e;
    font-size: 0.95rem;
    margin-right: 6px;
}
.account-summary-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #3f3f43;
}
.account-summary-table {
    margin-top: 8px;
}
.account-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 7px 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 1rem;
    color: #3f3f43;
}
.account-summary-row:last-child {
    border-bottom: none;
}
.account-summary-row span:first-child {
    color: #5e5e5e;
    min-width: 120px;
    font-size: 0.97rem;
}
.account-summary-row span:last-child {
    text-align: right;
    font-weight: 500;
    color: #3f3f43;
    max-width: 60%;
    word-break: break-word;
}
.account-link {
    color: #007aff;
    text-decoration: none;
    cursor: pointer;
}

.account-section-list {
    margin: 18px 0 0 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    overflow: hidden;
}
.account-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    color: #3f3f43;
    font-size: 1.08rem;
    padding: 16px 18px;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
}
.account-section-row:last-child {
    border-bottom: none;
}
.chevron {
    color: #b0b0b0;
    font-size: 1.5rem;
    margin-left: 10px;
}

/* --- Recent Activity Panel --- */
.recent-activity-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 62px); /* MODIFIED: Increased by 2px */
    background: #fff;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    z-index: 2000;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-top: 8px;
    min-height: 340px;
    max-height: 70vh;
    overflow-y: auto;
    transform: translateY(calc(100% - 26px));
    transition: transform 0.35s cubic-bezier(.4,1.3,.5,1);
    will-change: transform;
}
.recent-activity-panel.open {
    transform: translateY(0);
}
.recent-activity-handle {
    width: 44px;
    height: 6px;
    background: #b0b0b0;
    border-radius: 3px;
    margin: 0 auto 12px auto;
    cursor: pointer;
}
.recent-activity-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #3f3f43;
    margin: 0 0 10px 18px;
}
.recent-activity-section {
    margin-bottom: 18px;
}
.recent-activity-header {
    font-size: 1.08rem;
    font-weight: bold;
    color: #3f3f43;
    margin: 0 0 8px 18px;
}
.recent-activity-card {
    display: flex;
    align-items: flex-start;
    background: #fff;
    border-radius: 8px;
    margin: 0 12px 10px 12px;
    padding: 12px 10px 12px 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    border-left: 4px solid #4caf50;
    position: relative;
}
.recent-activity-card .activity-icon {
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #e0e0e0;
}
.recent-activity-card .activity-icon.green {
    background: #e8f5e9;
    border-radius: 6px;
    border-left: 4px solid #4caf50;
}
.recent-activity-card .activity-icon.teal {
    background: #e0f7fa;
    border-radius: 6px;
    border-left: 4px solid #1b6875;
}
.recent-activity-card .activity-icon svg {
    width: 24px;
    height: 24px;
    fill: #1b6875;
}
.recent-activity-card .activity-icon.green svg {
    fill: #4caf50;
}
.recent-activity-card .activity-icon.teal svg {
    fill: #1b6875;
}
.activity-details {
    flex: 1;
    min-width: 0;
}
.activity-title {
    font-size: 1.05rem;
    font-weight: 500;
    color: #007aff;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.activity-date {
    font-size: 0.97rem;
    color: #5e5e5e;
    margin-bottom: 2px;
}
.activity-desc {
    font-size: 0.97rem;
    color: #3f3f43;
}
.recent-activity-card .chevron {
    color: #b0b0b0;
    font-size: 1.5rem;
    margin-left: 10px;
    align-self: center;
}

@media (max-width: 600px) {
    .recent-activity-panel {
        min-height: 260px;
        max-height: 80vh;
    }
    .account-modal-header, .account-modal-body {
        padding-left: 0;
        padding-right: 0;
    }
    .account-summary-card {
        margin-left: 6px;
        margin-right: 6px;
    }
} 

/* --- Financial Accounts Table Styles --- */
.financial-accounts-table-wrapper {
  overflow-x: auto;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  padding-bottom: 8px;
}
.financial-accounts-table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-size: 0.98rem;
  background: #fff;
}
.financial-accounts-table th,
.financial-accounts-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e0e0e0;
  border-right: 1px solid #dddbda;
  background: #fff;
  color: #3f3f43;
  vertical-align: middle;
  text-align: left !important;
  word-break: break-word;
  overflow-wrap: break-word;
}
.financial-accounts-table th.sticky-col,
.financial-accounts-table td.sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #f3f2f2;
  border-right: 1px solid #dddbda;
  color: #3f3f43;
  font-weight: bold;
}
.financial-accounts-table th.label-col,
.financial-accounts-table td.label-col {
  min-width: 120px;
  max-width: 160px;
  text-align: left;
  font-weight: bold;
}
.financial-accounts-table th.account-header-col {
  background: #fff;
  text-align: center;
  font-weight: bold;
  min-width: 180px;
  max-width: 220px;
  border-right: 1px solid #dddbda;
}
.account-header-btn {
  background: none;
  border: none;
  color: #1b6875;
  font-weight: bold;
  font-size: 1.01rem;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  padding: 0;
  transition: color 0.15s;
}
.account-header-btn:focus,
.account-header-btn:hover {
  color: #15535e;
  outline: 2px solid #1b6875;
  outline-offset: 2px;
  text-decoration: none;
}
.financial-accounts-table tr:last-child td,
.financial-accounts-table tr:last-child th {
  border-bottom: none;
}
@media (max-width: 600px) {
  .financial-accounts-table th,
  .financial-accounts-table td {
    padding: 8px 6px;
    font-size: 0.93rem;
  }
  .financial-accounts-table th.label-col,
  .financial-accounts-table td.label-col {
    min-width: 90px;
    max-width: 120px;
  }
  .financial-accounts-table th.account-header-col {
    min-width: 120px;
    max-width: 150px;
  }
} 

.financial-accounts-table thead tr:first-child th {
  border-bottom: 1.5px solid #e0e0e0 !important;
} 

.financial-accounts-table th.sticky-col.label-col:first-child {
  border-top-left-radius: 0 !important;
  border-radius: 0 !important;
} 

/* Slide-in from right for account detail panel (match other panels) */
#financial-account-detail-panel.slide-panel {
    right: -100%;
    left: auto;
    transition: right 0.3s ease-in-out;
}
#financial-account-detail-panel.slide-panel.visible {
    right: 0;
}

/* Ensure account-section-list and account-section-row are styled for new buttons */
#financial-account-detail-panel .account-section-list {
    margin: 18px 0 0 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    overflow: hidden;
}
#financial-account-detail-panel .account-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    color: #3f3f43;
    font-size: 1.08rem;
    padding: 16px 18px;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
}
#financial-account-detail-panel .account-section-row:last-child {
    border-bottom: none;
} 

/* Financial Account Detail Panel Specific Styles */
.financial-account-hero-section {
    background-color: #f3f2f2; /* Light gray background */
    padding: 16px;
    display: flex;
    align-items: center;
    position: sticky; /* Make it sticky */
    top: 56px; /* Height of the .financial-info-header */
    z-index: 9; /* Below header, above content */
}

.financial-account-hero-section .icon-wrapper {
    background-color: #e0e0e0; 
    border-radius: 8px; 
    padding: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 48px; 
    height: 48px; 
    margin-right: 16px;
}

.financial-account-hero-section .icon-wrapper svg {
    width:32px;
    height:32px;
    fill:#1b6875;
}

.financial-account-hero-section .account-name-details {
    display: flex; 
    flex-direction: column;
}

.financial-account-hero-section .account-type-label {
    font-size: 0.9rem; 
    color: #5e5e5e;
}

.financial-account-hero-section .account-name-main {
    font-size: 1.2rem; 
    font-weight: bold; 
    color: #3f3f43;
}

.financial-account-detail-content {
    padding-top: 0; /* Remove padding if hero section is sticky and covers top */
    /* Add padding-bottom if needed for scroll clearance */
}

/* Ensure existing card and list styles are not negatively impacted */
.financial-account-detail-content .account-summary-card {
    margin: 16px;
    padding: 18px 16px 12px 16px;
    background: #ffffff; 
    border-radius: 10px; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.financial-account-detail-content .account-section-list {
    margin: 0 16px 16px 16px;
} 

/* Log Activity Modal Styles */
#log-activity-modal.slide-panel {
  right: -100%;
  left: auto;
  transition: right 0.3s ease-in-out;
  background: #fff;
  color: #3f3f43;
  z-index: 2001;
}
#log-activity-modal.slide-panel.visible {
  right: 0;
}
#log-activity-modal .financial-info-header {
  background: #ffffff;
  color: #3f3f43;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #e0e0e0;
}
#log-activity-modal .financial-info-content-title {
  color: #3f3f43;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  flex: 1;
}
#log-activity-modal .log-activity-form-content {
  background: #fff;
  color: #3f3f43;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
#log-activity-modal textarea {
  background: #f6f7fa;
  color: #3f3f43;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  width: 100%;
  min-height: 120px;
  resize: vertical;
  margin-top: 8px;
  padding: 10px;
  outline: none;
  transition: border-color 0.2s;
}
#log-activity-modal textarea:focus {
  border-color: #1b6875;
  box-shadow: 0 0 0 2px rgba(27,104,117,0.08);
}
#log-activity-modal .log-activity-meta {
  margin-top: 18px;
  color: #5e5e5e;
  font-size: 0.98rem;
}
#log-activity-modal .icon-button {
  color: #1b8cff;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
#log-activity-modal .icon-button:focus {
  outline: 2px solid #1b6875;
  outline-offset: 2px;
}
#log-activity-modal .icon-button svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
@media (max-width: 600px) {
  #log-activity-modal .log-activity-form-content {
    padding: 12px;
  }
  #log-activity-modal textarea {
    font-size: 0.95rem;
    min-height: 90px;
  }
} 

.profile-icon-circle {
    width: 36px;
    height: 36px;
    background-color: #e0e0e0;
    border-radius: 50%;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-person-icon {
    width: 24px;
    height: 24px;
    fill: #3f3f43; /* Dark text for white background */
}
.header-title-row {
    display: flex;
    align-items: flex-end;
    height: 38px;
    padding-left: 12px;
    margin-top: 2px;
}
.header-page-title {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: -1px;
    line-height: 1.1;
}


.contact-client-actions {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 15px;
}
.contact-client-action-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.contact-client-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 0;
  background: #eee;
}
.contact-client-action .slds-icon {
  width: 18px;
  height: 18px;
  fill: #fff;
  margin: 0;
}
.contact-client-label {
  color: #3f3f43;
  font-size: 1rem;
  font-weight: 500;
  margin-top: 10px;
  text-align: center;
  margin-bottom: 0;
}
.action-message {
  background: #4edcff;
}
.action-call {
  background: #5dd36c;
}
.action-mail {
  background: #1b8cff;
}
.action-log {
  background: #3aa17e;
}
.contact-client-label {
  color: #3f3f43;
  font-size: 1rem;
  font-weight: 500;
  margin-top: 2px;
  text-align: center;
}
.contact-client-action:focus, .contact-client-action:hover {
  box-shadow: 0 4px 16px rgba(27,104,117,0.18);
  outline: none;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
}

.contact-status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  gap: 6px;
}
.contact-status-indicator {
  position: static;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.contact-status-label {
  font-size: 0.85rem;
  color: #333;
  font-weight: 500;
}

/* --- SLDS Alert Banner Styles --- */
.ach-alert-banner {
  background-color: #f3f2f2;
  border-left: 4px solid #d72c2c;
  border-radius: 0 8px 8px 0;
  padding: 16px;
  margin: 16px 16px 0 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  position: relative;
  z-index: 1;
}

.ach-alert-banner .alert-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ach-alert-banner .alert-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #3f3f43;
  margin: 0;
}

.ach-alert-banner .alert-message {
  font-size: 0.95rem;
  color: #3f3f43;
  margin: 0;
  line-height: 1.4;
}

.ach-alert-banner .alert-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.ach-alert-banner .alert-button {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  min-width: 100px;
}

.ach-alert-banner .alert-button.primary {
  background-color: #1b6875;
  color: #ffffff;
}

.ach-alert-banner .alert-button.primary:hover {
  background-color: #15535e;
}

.ach-alert-banner .alert-button.secondary {
  background-color: #e0e0e0;
  color: #5e5e5e;
}

.ach-alert-banner .alert-button.secondary:hover {
  background-color: #d0d0d0;
}

.ach-alert-banner .alert-button:focus {
  outline: 2px solid #1b6875;
  outline-offset: 2px;
}

/* Alert banner specific positioning in financial account detail panel */
#financial-account-detail-panel .ach-alert-banner {
  margin: 16px 16px 0 16px;
  border-radius: 8px;
  border-left: 4px solid #d72c2c;
}

/* Responsive adjustments for alert banner */
@media (max-width: 600px) {
  .ach-alert-banner {
    margin: 12px 12px 0 12px;
    padding: 12px;
  }
  
  .ach-alert-banner .alert-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .ach-alert-banner .alert-button {
    width: 100%;
    min-width: auto;
  }
  
  #financial-account-detail-panel .ach-alert-banner {
    margin: 12px 12px 0 12px;
  }
}

/* --- Accounts Mobile Layout Styles --- */
.accounts-content {
    padding: 0;
    padding-top: calc(env(safe-area-inset-top, 0px) + 20px); /* Minimal spacing to clear header */
    background-color: #ffffff;
}

.lists-section {
    margin-bottom: 20px;
}

.recent-accounts-section {
    margin-bottom: 20px;
}

.section-title {
    font-size: 1rem;
    font-weight: bold;
    color: #3f3f43;
    margin-bottom: 10px;
    padding: 0 15px;
}

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
}

.list-item-text {
    font-size: 1rem;
    color: #3f3f43;
}

.list-item-chevron {
    color: #5e5e5e;
    font-size: 1.2rem;
}

.recent-accounts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recent-account-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    transition: background-color 0.15s;
}

.recent-account-item:last-child {
    border-bottom: none;
}

.recent-account-item:hover {
    background-color: #f7f7f7;
}

.recent-account-item .account-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.recent-account-item .account-name-main {
    font-weight: bold;
    font-size: 1rem;
    color: #3f3f43;
    margin-bottom: 4px;
}

.recent-account-item .account-detail-line {
    font-size: 0.9rem;
    color: #5e5e5e;
    display: flex;
    line-height: 1.4;
}

.recent-account-item .account-detail-label {
    font-weight: normal;
    margin-right: 0.25em;
    color: #5e5e5e;
}

.recent-account-item .account-detail-value {
    font-weight: normal;
    color: #3f3f43;
}

/* --- Alerts Accordion (Home and Account Detail) --- */
.alerts-section {
  margin: 16px;
  background: #f3f2f2;
  border: 1px solid #dddbda;
  border-radius: 8px;
}
.alerts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
}
.alerts-title {
  font-size: 1rem;
  font-weight: bold;
  color: #3f3f43;
}
.alerts-badges {
  display: flex;
  gap: 8px;
}
.badge-critical {
  background: #d72c2c;
  color: #ffffff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.8rem;
  min-width: 20px;
  text-align: center;
}
.badge-info {
  background: #1b6875;
  color: #ffffff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.8rem;
  min-width: 20px;
  text-align: center;
}
.alerts-list {
  list-style: none;
  margin: 0;
  padding: 0 12px 12px 12px;
}
.alert-item {
  background: #ffffff;
  border: 1px solid #dddbda;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
}
.alert-item.critical {
  border-color: #d72c2c; /* Red border for critical alerts */
}
.alert-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dddbda;
}
.alert-icon.warning {
  background: #d72c2c;
  border-color: #d72c2c;
}
.alert-icon.warning svg {
  fill: #ffffff;
}
.alert-icon.info,
.alert-icon.announcement {
  background: #1b6875;
  border-color: #1b6875;
}
.alert-icon.info svg,
.alert-icon.announcement svg {
  fill: #ffffff;
}
.alert-body { flex: 1; }
.alert-name { font-weight: bold; color: #181818; display: block; }
.alert-sub { font-size: 0.9rem; color: #5e5e5e; display: block; }
.alert-actions-row { display: flex; gap: 10px; margin-top: 8px; }
.alert-btn-primary {
  background: #1b6875;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
}
.alert-btn-secondary {
  background: #e0e0e0;
  color: #5e5e5e;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
}

/* Lease card styling - distinctive border color */
.lease-card {
    border-left: 4px solid #1b6875 !important; /* Primary teal for leases */
}

.loan-card {
    border-left: 4px solid #e0e0e0; /* Light gray for loans */
}

/* Ensure the border is visible on delinquency items */
.delinquency-item {
    border-left: 4px solid #e0e0e0; /* Default light gray */
}

/* Take Action button container for delinquency cards */
.take-action-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  padding: 16px 15px; /* match item-details horizontal padding */
  border-top: 1px solid #e0e0e0;
}

/* Make the Take Action button span the full card width */
.take-action-button-container .take-action-btn {
  width: 100%;
  display: block;
}

/* Ensure equal spacing below the Take Action area within expandable cards */
.list-section .item-details {
  padding-bottom: 0;
}
.alerts-caret { color: #000000; }
.alerts-caret svg { fill: #000000; }

/* Salesforce Task modal specifics */
#salesforce-task-modal.slide-panel {
  right: -100%;
  left: auto;
  transition: right 0.3s ease-in-out;
  background: #fff;
  color: #3f3f43;
  z-index: 2001;
}
#salesforce-task-modal.slide-panel.visible { right: 0; }

/* Extension Request modal specifics */
#extension-request-modal.slide-panel {
  right: -100%;
  left: auto;
  transition: right 0.3s ease-in-out;
  background: #fff;
  color: #3f3f43;
  z-index: 2001;
}
#extension-request-modal.slide-panel.visible { right: 0; }

/* Extension Request form styling */
.extension-request-form-content {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Custom dropdown styling */
.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-select-trigger {
  width: 100%;
  background-color: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
  color: #3f3f43;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transition: border-color 0.2s;
}

.custom-select-trigger:active {
  border-color: #1b6875;
  background-color: #f8f8f8;
}

.custom-select-trigger.placeholder {
  color: #a8a8a8;
}

.custom-select-arrow {
  width: 20px;
  height: 20px;
  stroke: #666;
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 8px;
}

.custom-select-trigger.active .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: none;
}

.custom-select-dropdown.active {
  display: block;
}

.custom-select-option {
  padding: 12px;
  font-size: 16px;
  color: #3f3f43;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.custom-select-option:last-child {
  border-bottom: none;
}

.custom-select-option:active {
  background-color: #f0f0f0;
}

.custom-select-option.selected {
  background-color: rgba(27, 104, 117, 0.1);
  color: #1b6875;
  font-weight: 500;
}

/* Hide native selects */
#extension-request-modal select {
  display: none;
}

/* Style other form inputs */
#extension-request-modal input[type="text"],
#extension-request-modal input[type="number"],
#extension-request-modal input[type="date"],
#extension-request-modal textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
  color: #3f3f43;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#extension-request-modal input:focus,
#extension-request-modal textarea:focus {
  outline: none;
  border-color: #1b6875;
  box-shadow: 0 0 0 3px rgba(27, 104, 117, 0.1);
}

#extension-request-modal input::placeholder,
#extension-request-modal textarea::placeholder {
  color: #a8a8a8;
}

/* Style checkboxes for better mobile appearance */
#extension-request-modal input[type="checkbox"] {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid #d8d8d8;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  position: relative;
}

#extension-request-modal input[type="checkbox"]:checked {
  background-color: #1b6875;
  border-color: #1b6875;
}

#extension-request-modal input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Extension Request button styling - make them stack vertically */
.take-action-button-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
  margin-top: 12px;
  padding: 16px 15px;
  border-top: 1px solid #e0e0e0;
}

.take-action-button-container .alert-btn-primary,
.take-action-button-container .alert-btn-secondary,
.take-action-button-container .request-extension-btn {
  width: 100%;
  display: block;
}

/* Extension success message */
.extension-success-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  z-index: 10;
}

.extension-success-message.hidden {
  display: none;
}

.extension-success-message .success-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  animation: checkmark 0.6s ease-in-out;
}

@keyframes checkmark {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

/* --- Fix: Accordion cards in Renewals/Delinquencies should expand downward --- */
/* Scope to .list-section so the generic .list-item used elsewhere (e.g., "Lists") isn't affected */
.list-section .list-item {
    display: flex;
    flex-direction: column; /* Stack summary and details vertically */
    align-items: stretch;   /* Make children take full width */
}
.list-section .item-summary,
.list-section .item-details {
    width: 100%;
}

/* --- Layout: Place alert action buttons on the right side --- */
.alerts-section .alert-body {
  display: grid;
  grid-template-columns: 1fr; /* stack content vertically */
  row-gap: 6px;
}
.alerts-section .alert-body .alert-name,
.alerts-section .alert-body .alert-sub {
  grid-column: 1; /* text spans full width on its own row(s) */
}
.alerts-section .alert-body .alert-actions-row {
  grid-column: 1; /* place actions below the text */
  justify-self: end; /* align actions to the right edge */
  margin-top: 4px;
}

/* --- Billing History Panel Styles --- */
#billing-history-panel.slide-panel {
  right: -100%;
  left: auto;
  transition: right 0.3s ease-in-out;
}
#billing-history-panel.slide-panel.visible {
  right: 0;
}

.billing-history-hero-section {
  background-color: #f3f2f2;
  padding: 16px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 56px;
  z-index: 9;
  border-bottom: 1px solid #e0e0e0;
}

.billing-history-account-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.billing-history-account-header .icon-wrapper {
  background-color: #e0e0e0;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 12px;
}

.billing-history-account-header .icon-wrapper svg {
  width: 24px;
  height: 24px;
  fill: #1b6875;
}

.billing-history-account-info {
  flex: 1;
}

.billing-history-account-label {
  font-size: 0.85rem;
  color: #5e5e5e;
  margin-bottom: 2px;
}

.billing-history-account-name {
  font-size: 1.1rem;
  font-weight: bold;
  color: #3f3f43;
}

.billing-history-loan-number {
  font-size: 0.85rem;
  color: #5e5e5e;
  margin-top: 2px;
}

.billing-history-content {
  padding: 16px;
  background-color: #ffffff;
}

/* Summary Cards Section */
.billing-summary-section {
  margin-bottom: 20px;
}

.billing-summary-card {
  background: transparent;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.billing-summary-card-title {
  font-size: 0.95rem;
  font-weight: bold;
  color: #3f3f43;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.billing-summary-card-title svg {
  width: 18px;
  height: 18px;
  fill: #3f3f43;
}

.billing-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #e0e0e0;
  font-size: 0.95rem;
}

.billing-summary-row:last-child {
  border-bottom: none;
}

.billing-summary-row span:first-child {
  color: #5e5e5e;
  font-size: 0.9rem;
}

.billing-summary-row span:last-child {
  text-align: right;
  font-weight: 600;
  color: #3f3f43;
  font-size: 0.9rem;
}

.billing-summary-row.highlight span:last-child {
  font-weight: 600;
  color: #3f3f43;
  font-size: 0.95rem;
}

/* Billing History Cards */
.billing-history-list-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #3f3f43;
  margin-bottom: 12px;
  margin-top: 8px;
  padding: 0 16px;
}

.billing-history-card {
  background: #ffffff;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
  box-shadow: none;
  border-bottom: 1px solid #e0e0e0;
}

.billing-history-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #ffffff;
  border-bottom: none;
  cursor: pointer;
}

.billing-card-status-section {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.billing-status-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.billing-status-badge.unpaid {
  background-color: #d72c2c;
  color: #ffffff;
}

.billing-status-badge.billed {
  background-color: #1b6875;
  color: #ffffff;
}

.billing-due-date {
  font-size: 1rem;
  font-weight: bold;
  color: #3f3f43;
}

.billing-card-amount {
  font-size: 1rem;
  font-weight: 600;
  color: #3f3f43;
  margin-right: auto;
  margin-left: 16px;
}

.billing-card-toggle {
  color: #5e5e5e;
  transition: transform 0.2s ease;
  margin-right: 8px;
  order: -1;
}

.billing-card-toggle svg {
  width: 20px;
  height: 20px;
  fill: #5e5e5e;
}

.billing-history-card.expanded .billing-card-toggle {
  transform: rotate(90deg);
}

.billing-card-details {
  display: none;
  padding: 16px;
  padding-top: 0;
  background: #ffffff;
  border-top: 1px solid #e0e0e0;
}

.billing-history-card.expanded .billing-card-details {
  display: block;
}

.billing-details-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.95rem;
}

.billing-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #e0e0e0;
}

.billing-detail-item:last-child {
  border-bottom: none;
}

.billing-detail-label {
  font-size: 0.9rem;
  color: #5e5e5e;
  font-weight: normal;
  flex-shrink: 0;
  margin-right: 12px;
}

.billing-detail-value {
  font-size: 0.95rem;
  color: #3f3f43;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

.billing-detail-item.full-width {
  /* No special grid column span needed with flexbox */
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .billing-summary-card {
    padding: 12px 14px;
  }
}

/* --- Transaction History Panel Styles --- */
#transaction-history-panel.slide-panel { right: -100%; left: auto; transition: right 0.3s ease-in-out; }
#transaction-history-panel.slide-panel.visible { right: 0; }

.transaction-history-hero-section {
  background-color: #f3f2f2;
  padding: 16px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 56px;
  z-index: 9;
  border-bottom: 1px solid #e0e0e0;
}

.transaction-history-account-header { display:flex; align-items:center; margin-bottom:12px; }
.transaction-history-account-header .icon-wrapper { background:#e0e0e0; border-radius:8px; padding:8px; display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin-right:12px; }
.transaction-history-account-header .icon-wrapper svg { width:24px; height:24px; fill:#1b6875; }
.transaction-history-account-info { flex:1; }
.transaction-history-account-label { font-size:0.85rem; color:#5e5e5e; margin-bottom:2px; }
.transaction-history-account-name { font-size:1.1rem; font-weight:bold; color:#3f3f43; }
.transaction-history-loan-number { font-size:0.85rem; color:#5e5e5e; margin-top:2px; }

.transaction-history-content { padding:16px; background:#ffffff; }

/* Filters row */
.txn-filters { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; align-items:end; }
.txn-filter-checkboxes { display:flex; gap:12px; align-items:center; grid-column: 1 / -1; }
.txn-filter-checkboxes label { display:flex; align-items:center; gap:6px; font-size:0.95rem; color:#3f3f43; }
.txn-date-row { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.txn-date-row input { width:100%; padding:10px; border:1px solid #e0e0e0; border-radius:6px; font-size:0.95rem; }

/* Transactions table (mobile-friendly) */
.txn-table-wrapper { overflow-x:auto; background:#fff; border-radius:10px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.txn-table { width:max-content; min-width:100%; border-collapse:separate; border-spacing:0; }
.txn-table th, .txn-table td { padding:10px 12px; border-bottom:1px solid #e0e0e0; border-right:1px solid #dddbda; text-align:left; color:#3f3f43; white-space:nowrap; }
.txn-table th { background:#f3f2f2; font-weight:bold; }
.txn-table th:last-child, .txn-table td:last-child { border-right:none; }
.txn-table tr:last-child td { border-bottom:none; }

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

/* Transaction Cards (alternate view) */
.txn-card-list { margin-top: 16px; }
.txn-card {
  background: #ffffff;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
  box-shadow: none;
  border-bottom: 1px solid #e0e0e0;
}

.txn-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #ffffff;
  border-bottom: none;
  cursor: pointer;
}

.txn-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.txn-type-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.txn-type-badge.payment {
  background-color: #4caf50;
  color: #ffffff;
}

.txn-type-badge.disbursement {
  background-color: #ff9800;
  color: #ffffff;
}

.txn-card-date {
  font-size: 1rem;
  font-weight: bold;
  color: #3f3f43;
}

.txn-card-amount {
  font-size: 1rem;
  font-weight: 600;
  color: #3f3f43;
  margin-right: auto;
  margin-left: 16px;
}

.txn-card-toggle {
  color: #5e5e5e;
  transition: transform 0.2s ease;
  margin-right: 8px;
  order: -1;
}

.txn-card-toggle svg {
  width: 20px;
  height: 20px;
  fill: #5e5e5e;
}

.txn-card.expanded .txn-card-toggle {
  transform: rotate(90deg);
}

.txn-card-details {
  display: none;
  padding: 16px;
  padding-top: 0;
  background: #ffffff;
  border-top: 1px solid #e0e0e0;
}

.txn-card.expanded .txn-card-details {
  display: block;
}

.txn-details-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.95rem;
}

.txn-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #e0e0e0;
}

.txn-detail-item:last-child {
  border-bottom: none;
}

.txn-detail-label {
  font-size: 0.9rem;
  color: #5e5e5e;
  font-weight: normal;
  flex-shrink: 0;
  margin-right: 12px;
}

.txn-detail-value {
  font-size: 0.95rem;
  color: #3f3f43;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

.txn-detail-item.full-width {
  /* No special grid column span needed with flexbox */
}