:root {
    --primary-color: #4CAF50;
    --accent-color: #e9ecef;
}
.tooltip.show{
    display: none !important;
}
/* Global Settings New*/
body {
    background-color: #f5f5f5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}
.home-icon {
    display: none;
}
/* Quick Quote Compact Form Styles */

/* Calculator Card Styling */
.calculator-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 24px;
    margin-bottom: 20px;
}

/* Form Control Styling */
.calculator-card .form-control {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 16px;
    transition: all 0.2s ease;
    background: #f9fafb;
}

.calculator-card .form-control:focus {
    border-color: #0037da;
    background: white;
    box-shadow: 0 0 0 3px rgba(0, 55, 218, 0.1);
}

.calculator-card .form-control::placeholder {
    color: #6b7280;
    font-weight: 500;
}

/* Select Dropdown Styling */
.calculator-card select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
    appearance: none;
}

/* Disabled option styling */
.calculator-card select.form-control option[disabled] {
    color: #6b7280;
    font-style: italic;
}

/* Checkbox Styling */
.calculator-card .form-check {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.calculator-card .form-check:hover {
    border-color: #d1d5db;
    background: #f3f4f6;
}

.calculator-card .form-check:has(input:checked) {
    border-color: #0037da;
    background: rgba(0, 55, 218, 0.05);
}

.calculator-card .form-check-input {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    margin: 0;
    cursor: pointer;
}

.calculator-card .form-check-input:checked {
    background-color: #0037da;
    border-color: #0037da;
}

.calculator-card .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(0, 55, 218, 0.1);
}

.calculator-card .form-check-label {
    font-weight: 500;
    color: #374151;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

/* Down Payment Section */
.calculator-card .form-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .calculator-card {
        padding: 16px;
        margin: 0 -16px 16px -16px;
        border-radius: 0;
    }
    
    .calculator-card .form-control {
        padding: 16px 14px;
        font-size: 18px;
    }
    
    .calculator-card .form-check {
        padding: 14px 16px;
    }
    
    .calculator-card .form-check-input {
        width: 22px;
        height: 22px;
    }
}

/* Enhanced Quick Quote Font Improvements */
.quick-quote-tabs .calculator-card {
    font-size: 16px;
}

.quick-quote-tabs .calculator-card .form-control {
    font-size: 16px !important;
    padding: 12px !important;
    min-height: 48px;
    line-height: 1.4;
}

.quick-quote-tabs .calculator-card select.form-control {
    font-size: 16px !important;
    padding: 12px !important;
}

.quick-quote-tabs .calculator-card input[type="tel"],
.quick-quote-tabs .calculator-card input[type="text"],
.quick-quote-tabs .calculator-card input[type="date"],
.quick-quote-tabs .calculator-card input[type="time"] {
    font-size: 16px !important;
    padding: 12px !important;
    border-radius: 6px;
}

.quick-quote-tabs .calculator-card .btn {
    font-size: 16px !important;
    padding: 12px 24px !important;
    font-weight: 600;
}

.quick-quote-tabs .calculator-card .enhanced-slider {
    height: 8px !important;
}

.quick-quote-tabs .calculator-card .slider-value-display span {
    font-size: 16px !important;
    font-weight: 600;
}

.quick-quote-tabs .calculator-card .preset-btn {
    font-size: 14px !important;
    padding: 8px 16px !important;
    min-width: 60px;
}

.quick-quote-tabs .calculator-card .amount-input {
    font-size: 18px !important;
    font-weight: 600;
    padding: 12px !important;
}

.quick-quote-tabs .calculator-card .summary-title {
    font-size: 14px !important;
    font-weight: 600;
}

.quick-quote-tabs .calculator-card .summary-value {
    font-size: 16px !important;
    font-weight: 600;
}

/* Mobile specific improvements */
@media (max-width: 767px) {
    .quick-quote-tabs .calculator-card .form-control {
        font-size: 18px !important;
        padding: 14px !important;
        min-height: 52px;
    }
    
    .quick-quote-tabs .calculator-card .amount-input {
        font-size: 20px !important;
    }
    
    .quick-quote-tabs .calculator-card .btn {
        font-size: 18px !important;
        padding: 14px 28px !important;
    }
}

/* Hide grid/list view toggle on mobile for Property Listings */
@media (max-width: 767px) {
    .listings-header .view-toggle-group {
        display: none !important;
    }
}

/* Loan option holder styling */
#loan-option-holder-cq .detail-value, 
#loan-option-holder-cq .savings-value {
    font-size: 1em;
}

/* LTV and Loan Types Styling */
#CQ_LTV,
#CQ_LoanTypes {
    font-weight: 700 !important;
    font-size: 1.1em !important;
    color: #0037da !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Summary card styling for better visual hierarchy */
.summary-card .summary-value {
    font-weight: 700 !important;
    font-size: 1.1em !important;
    color: #0037da !important;
}

.summary-card .summary-title {
    font-weight: 600 !important;
    color: #374151 !important;
    font-size: 0.9em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

@media (min-width: 768px) {
    .calculator-card {
        max-width: 768px;
    }
}

/* Global overflow fix for all containers */
* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Prevent horizontal scrolling on all sections */
.section {
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

ul#adminTabs .nav-item {
    padding: 0;
}
/* Fix for any potential horizontal overflow */
.container, .login-container, .auth-card, .registration-card {
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

/* ----------------- LOGIN PAGE STYLES ----------------- */
/* Card Styles */
#registration-section, #user-registration-section {
    background-color: #0037da;
}

    #registration-section .form-group {
        flex-direction: column;
        align-items: flex-start;
    }

.install-popup {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #007bff;
    color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 16px;
}

    .install-popup button {
        margin: 5px;
        padding: 10px 15px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        font-size: 14px;
    }

#installBtn {
    background: white;
    color: #007bff;
}

#closePopup {
    background: #ff3b30;
    color: white;
}

.registration-card {
    background-color: #0037da;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: top;
    padding: 20px;
}

@media (max-width: 767px) {
    
    #registration-section .button-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    gap: 12px;
    align-content: space-between;
    flex-direction: column;
}
#registration-section .button-row button{
    width: 100%;
}
}
@media (min-width: 768px) {
    #registration-section #section-basic .auth-card,#registration-section .registration-card {
      width: 600px;
      max-width: 600px;
  }
  
    #registration-section .login-form{
        max-width: 100%;
    }
   }

.card-section {
    padding: 15px 20px;
    background: #ffffff;
    border-radius: 10px;
}

/* Ensure section headings do not collide with grid columns in forms */
.card-section > h4.mb-2 {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

.gray-section {
    background-color: #f2f2f2;
    border-radius: 0 0 10px 10px;
}

/* Unified topbar layout for sections (left/center/right) */
.unified-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px;  background:#ffffff; border:1px solid #e9ecef; border-radius:10px; }
.unified-topbar .topbar-left, .unified-topbar .topbar-right { display:flex; align-items:center; gap:8px; }
.unified-topbar .topbar-center { flex:1; display:flex; align-items:center; justify-content:center; }
.unified-topbar .topbar-title { font-weight:700; color:#111827; }
.unified-topbar .topbar-btn { background:#f8f9fa; border:1px solid #e9ecef; border-radius:8px; padding:6px 10px; cursor:pointer; }
.unified-topbar .topbar-btn:hover { background:#eef2ff;    color: #0237da; }
.unified-topbar .topbar-btn { background:#0237da; color:#ffffff; border-color:#0237da; }
.unified-topbar .proxy-toggle { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; background:#0237da; color:#ffffff; cursor:pointer; }
.unified-topbar .proxy-toggle i { pointer-events:none; }

/* Keep left/center/right header together as a sticky unit when needed */
.unified-topbar-wrapper { position:relative; }
.unified-topbar .add-btn { color:#ffffff; margin-left: 5px; }

/* Dashboard stat cards: one white, one green */
#quote-section .stats-grid .stat-card:nth-child(1) { background:#ffffff; color:#111827; border:1px solid #e9ecef; }
#quote-section .stats-grid .stat-card:nth-child(2) { background:#00ff41; color:#111827; }
#quote-section .stats-grid .stat-card:nth-child(2) .amount { color:#111827; }
#quote-section .stats-grid .stat-card:nth-child(2) .label { color:#111827; opacity:0.85; }
/* Applications toolbar */
.apps-toolbar { border:1px solid #e9ecef !important; border-radius:12px; }
.apps-search { position:relative; }
.apps-search i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#6b7280; }
.apps-search input.form-control { padding-left:36px; }
.apps-searchbar { position:relative; display:flex; align-items:center; gap:0px; }
.apps-searchbar .search-icon-btn { display:none; }
.apps-searchbar input.form-control { flex:1; }
.apps-compact-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.apps-compact-row > * { flex:1 1 auto; }
.apps-status .status-dropdown-btn { background:#00ff41; color:#111827; border:1px solid #00ff41; border-radius:10px; padding:10px 14px; min-width:160px; }
.apps-status .status-dropdown-btn.icon-only { min-width:auto; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; }
.apps-status .dropdown-content { right:0; left:auto; display:none; }
.apps-status .dropdown-content.open { display:block; }

/* List header above applications list */
#applications-section .apps-list-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#applications-section .apps-list-header .apps-list-title { font-weight:700; color:#111827; font-size:16px; }
#applications-section .apps-list-header .apps-status { margin-left:auto; position:relative; }
#applications-section .apps-list-header .apps-status .status-dropdown-btn { width:44px; height:44px; min-width:auto; padding:0; display:flex; align-items:center; justify-content:center; background:#00ff41; border:1px solid #00ff41; color:#111827; border-radius:10px; }
/* Media query moved to end of file */

/* Green button text should be black for contrast */
.btn-success { background:#00ff41 !important; border-color:#00ff41 !important; color:#111827 !important; font-weight:600; }
.btn-success:hover { filter:brightness(0.95); }

/* Application cards modern look */
#applications-section .loan-card,
#applications-section .client-card,
#applications-section .card-section { border:1px solid #e9ecef; border-radius:12px; box-shadow:0 1px 6px rgba(16,24,40,0.06); }
#applications-section .new-apps-btn { border-radius:10px; border:1px solid #6e92ff; background:transparent; color:#ffffff; }
#applications-section .status-dropdown-btn { border-radius:10px; }
.applications-header #statusDropdownContent {min-width: 200px;}

/* Quick actions popover */
.qa-popover { position:absolute; background:#ffffff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 12px 32px rgba(16,24,40,0.18); padding:8px; display:none; min-width:220px; z-index:10000; }
.qa-popover.open { display:block; }
.qa-popover ul { list-style:none; padding:0; margin:0; }
.qa-popover li { margin:0; }
.qa-popover a { display:flex; align-items:center; gap:10px; padding:10px 12px; color:#111827; text-decoration:none; border-radius:8px; }
.qa-popover a:hover { background:#f5f7ff; }

/* LTV & Eligible Loan Types grid in Quick Quote */
.ltv-types-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
/* Media query moved to end of file */

/* Loader: branded animation wrapper with modern spinner design */
#app-loader { 
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#app-loader.loading { 
    display: flex !important; 
    align-items: center; 
    justify-content: center; 
    opacity: 1;
}

#app-loader .brand-loader { 
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Main spinner - clean border with shimmer effect */
#app-loader .brand-loader::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border: 4px solid rgba(0, 55, 218, 0.2);
    border-top: 4px solid #0037da;
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
    box-shadow: 0 0 20px rgba(0, 55, 218, 0.3);
}

/* Shimmer effect overlay - moving highlight around border */
#app-loader .brand-loader::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, 
        transparent 0deg, 
        transparent 60deg, 
        rgba(255, 255, 255, 0.8) 90deg, 
        rgba(255, 255, 255, 0.4) 120deg, 
        transparent 150deg, 
        transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 46px, black 50px);
    mask: radial-gradient(circle, transparent 46px, black 50px);
    animation: shimmer 1.5s linear infinite;
    z-index: 2;
}

/* Static logo in center */
#app-loader .brand-logo { 
    width: 50px; 
    height: 50px; 
    filter: none !important;
    z-index: 3;
    position: relative;
    /* Logo stays static - no rotation */
}

/* Pulse effect outer ring */
#app-loader .brand-loader .pulse-ring {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 2px solid rgba(0, 55, 218, 0.2);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Remove old dots styling */
#app-loader .brand-dots { display: none; }

/* Back button color */
.back-button { color:#0039c7 !important; }

/* Form Styles */
.form-label {
    font-weight: 400;
    color: #333;
}
div#preapproval-letter-section {
    margin-top: -13px;
}
/* Global form controls - exclude authentication pages */
/* Global input heights unified across app (mobile and desktop) */
.form-control,
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
select.form-control, select, textarea.form-control {
    min-height: 44px;
    height: 44px;
}
/* Preserve existing border/radius for non-auth pages */
.form-control:not(.login-container .form-control):not(.auth-card .form-control):not(.registration-card .form-control) {
    border-radius: 4px;
    border: 1px solid #dee2e6;
    padding: 10px 15px;
    font-size: 16px;
}

/* Button Styles */
.btn-register {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 12px;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    border-radius: 4px;
    margin-top: 15px;
}

.btn-back {
    background-color: var(--accent-color);
    border: none;
    color: #212529;
    font-weight: 500;
}

.btn-next {
    background-color: var(--primary-color);
    border: none;
    color: white;
    font-weight: 500;
}

/* Stepper Styles */
.stepper-container {
    margin: 20px auto;
    max-width: 700px;
}

.stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
}

    .step:not(:last-child):after {
        content: '';
        position: absolute;
        top: 15px;
        right: -50%;
        width: 100%;
        height: 2px;
        background-color: #dee2e6;
        z-index: 0;
    }

    .step.active:not(:last-child):after,
    .step.completed:not(:last-child):after {
        background-color: var(--primary-color);
    }

.step-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #adb5bd;
    margin-bottom: 8px;
    z-index: 1;
}

.step.active .step-icon {
    background-color: var(--primary-color);
    color: white;
}

.step.completed .step-icon {
    background-color: var(--primary-color);
    color: white;
}

.step-label {
    font-size: 14px;
    font-weight: 500;
    color: #3768ff;
    text-align: center;
}

.step.active .step-label {
    color: var(--primary-color);
    font-weight: 600;
}

/* Support Section */
.support-section {
    text-align: center;
    color: white;
}

.support-text {
    font-size: 16px;
    margin: auto;
    padding: 10px;
    background: #012db5;
}

.phone-number {
    font-weight: 600;
    font-size: 18px;
}

/* Section visibility */
.form-section {
    display: none;
}

    .form-section.active {
        display: block;
    }

.register-container {
    background-color: #0037da;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    .register-container .button-row .btn-next {
        margin-bottom: 0 !important;
    }

.login-container {
    background-color: #0037da;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-title {
    color: white;
    font-size: 14px;
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-align: center;
}

.login-brand {
    color: white;
    font-size: 42px;
    font-weight: bold;
    letter-spacing: 5px;
    margin-bottom: 50px;
    text-align: center;
}
.modal-backdrop.fade.show {
    display: none !important;
}
.compact-brand {
    color: white;
    font-size: 42px;
    font-weight: bold;
    letter-spacing: 5px;
    margin-bottom: 10px;
    text-align: center;
}

.login-form {
    width: 100%;
    max-width: 400px;
}

.login-input {
    background-color: white;
    border: none;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
    width: 100%;
    font-size: 16px;
}

.login-button {
    background-color: #25a71a;
    border: none;
    border-radius: 6px;
    color: white;
    padding: 15px;
    width: 100%;
    font-size: 18px;
    margin-bottom: 30px;
    cursor: pointer;
}

.login-register {
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: 16px;
}

    .login-register a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        margin-left: 5px;
    }

/* ----------------- SHARED HEADER ----------------- */
.agent-header {
    background-color: #0037da;
    color: white;
    padding: 2.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    animation: fadeIn 0.5s ease-in-out;
}

.custom-quickrate {
    padding: 1.5rem 1rem 1rem;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Title Section */
.title-section h1 {
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;
    animation: slideDown 0.6s ease-out;
}

.title-section h2 {
    font-weight: 500;
    text-align: center;
    animation: slideDown 0.8s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Action Section */
/* Keep buttons on the same row */
.action-section {
    display: flex;
    flex-direction: row;
    /* Ensure horizontal layout */
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

/* Set appropriate widths for both buttons */
.new-apps-btn,
.status-dropdown {
    flex: 1;
    /* Each takes 50% of the space minus the gap */
    max-width: calc(50% - -0.25rem);
}

/* Override existing mobile media query */
/* Media query moved to end of file */

/* New Apps Button */

.new-apps-btn:active {
    transform: scale(0.98);
}

/* Status Dropdown */
.status-dropdown {
    position: relative;
    flex: 1;
    z-index: 100;
}

.status-dropdown-btn {
    background-color: rgb(3 42 164 / 70%);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: 400;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

    .status-dropdown-btn i {
        transition: transform 0.3s;
        font-size: 0.8rem;
      
    }

    .status-dropdown-btn.active i {
        transform: rotate(180deg);
    }

/* Dropdown Content */
.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    background-color: white;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    overflow: hidden;
    z-index: 200;
    animation: growDown 0.3s ease-in-out forwards;
}

@keyframes growDown {
    0% {
        transform: scaleY(0);
        opacity: 0;
        transform-origin: top center;
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
        transform-origin: top center;
    }
}

.dropdown-item {
    color: #333;
    padding: 15px;
    text-decoration: none;
    display: block;
    transition: background-color 0.2s;
    border-bottom: 1px solid #f0f0f0;
}

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

    .dropdown-item:first-child {
        font-weight: bold;
    }

    .dropdown-item:hover {
        background-color: #f8f8f8;
    }

    #applications-section .dropdown-item:focus, #applications-section .dropdown-item:hover {
        color: #000;
    }
    

/* Container for client cards */
.container {
  
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    position: relative;
    z-index: 10;
    padding-top: 1rem;
    animation: slideUp 0.8s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Client Card Styling */
.client-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1rem 0;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0; /* Default border */
}

/* Client Card Border Colors Based on Status - Higher Specificity */
#applications-section .client-card.status-pre-qualified {
    border: 1px solid #9cdda0 !important; /* Light green for Pre Qualified */
    background: #f6fff6 !important; /* Light green background */
}

#applications-section .client-card.status-not-eligible {
    border: 1px solid #fc3100 !important; /* Light red for Not Eligible */
    background: #fff6f6 !important; /* Light red background */
}

#applications-section .client-card.status-underwriting {
    border: 1px solid #ffeaa7 !important; /* Light yellow for Underwriting */
    background: #fffef6 !important; /* Light yellow background */
}

#applications-section .client-card.status-approved {
    border: 1px solid #bee5eb !important; /* Light blue for Approved */
    background: #f6faff !important; /* Light blue background */
}

#applications-section .client-card.status-closed {
    border: 1px solid #f5c6cb !important; /* Light red for Closed */
    background: #fff6f6 !important; /* Light red background */
}

#applications-section .client-card.status-processing {
    border: 1px solid #d6d8db !important; /* Light gray for Processing */
    background: #f8f9fa !important; /* Light gray background */
}

#applications-section .client-card.status-pending {
    border: 1px solid #fad7ac !important; /* Light orange for Pending */
    background: #fffaf6 !important; /* Light orange background */
}

#applications-section .client-card.status-denied,
#applications-section .client-card.status-rejected {
    border: 1px solid #f5c6cb !important; /* Light red for Denied/Rejected */
    background: #fff6f6 !important; /* Light red background */
}

#applications-section .client-card.status-active {
    border: 1px solid #c3e6cb !important; /* Light green for Active */
    background: #f6fff6 !important; /* Light green background */
}

#applications-section .client-card.status-inactive {
    border: 1px solid #d6d8db !important; /* Light gray for Inactive */
    background: #f8f9fa !important; /* Light gray background */
}

#applications-section .client-card.status-loan-selected {
    border: 1px solid #d1b3ff !important; /* Light purple for Loan Selected */
    background: #faf6ff !important; /* Light purple background */
}

/* Additional high-specificity rules to ensure borders are applied */
body #applications-section .client-card.status-pre-qualified {
    border: 1px solid #9cdda0 !important; /* Light green for Pre Qualified */
}

body #applications-section .client-card.status-not-eligible {
    border: 1px solid #fc3100 !important; /* Light red for Not Eligible */
}

/* Mobile list items with higher specificity */
body .applications-list-view.active .mobile-list-item.status-pre-qualified {
    border: 1px solid #9cdda0 !important; /* Light green for Pre Qualified */
}

body .applications-list-view.active .mobile-list-item.status-not-eligible {
    border: 1px solid #fc3100 !important; /* Light red for Not Eligible */
}

/* Mobile List Item Border Colors Based on Status */
.mobile-list-item.status-pre-qualified {
    border: 1px solid #9cdda0; /* Light green for Pre Qualified */
    background: #f6fff6; /* Light green background */
}

.mobile-list-item.status-not-eligible {
    border: 1px solid #fc3100; /* Light red for Not Eligible */
    background: #fff6f6; /* Light red background */
}

.mobile-list-item.status-underwriting {
    border: 1px solid #ffeaa7; /* Light yellow for Underwriting */
    background: #fffef6; /* Light yellow background */
}

.mobile-list-item.status-approved {
    border: 1px solid #bee5eb; /* Light blue for Approved */
    background: #f6faff; /* Light blue background */
}

.mobile-list-item.status-closed {
    border: 1px solid #f5c6cb; /* Light red for Closed */
    background: #fff6f6; /* Light red background */
}

.mobile-list-item.status-processing {
    border: 1px solid #d6d8db; /* Light gray for Processing */
    background: #f8f9fa; /* Light gray background */
}

.mobile-list-item.status-pending {
    border: 1px solid #fad7ac; /* Light orange for Pending */
    background: #fffaf6; /* Light orange background */
}

.mobile-list-item.status-denied,
.mobile-list-item.status-rejected {
    border: 1px solid #f5c6cb; /* Light red for Denied/Rejected */
    background: #fff6f6; /* Light red background */
}

.mobile-list-item.status-active {
    border: 1px solid #c3e6cb; /* Light green for Active */
    background: #f6fff6; /* Light green background */
}

.mobile-list-item.status-inactive {
    border: 1px solid #d6d8db; /* Light gray for Inactive */
    background: #f8f9fa; /* Light gray background */
}

.mobile-list-item.status-loan-selected {
    border: 1px solid #d1b3ff; /* Light purple for Loan Selected */
    background: #faf6ff; /* Light purple background */
}



/* Media query moved to end of file */

/* ----------------- APPLICATIONS LIST STYLES ----------------- */

/* Edit Application CSS */

/* Header styles for the edit section */

.header {
    background-color: #1a3bac;
    color: white;
    padding: 20px;
    position: relative;
}

.agent-title {
    text-align: center;
    font-size: 18px;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

.greeting {
    font-size: 36px;
    margin-bottom: 20px;
}

.back-button {
    position: absolute;
    left: 20px;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: none !important;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
}

.application-info {
    margin-left: 70px;
}

.edit-text {
    font-size: 16px;
    opacity: 0.8;
}

.applicant-name {
    font-size: 28px;
    font-weight: 500;
}

.header.edit-header {
    background-color: #0039c6;
    color: white;
    position: relative;
    padding: 20px;
}

    /* New Application Header Title Styling */
    .header.edit-header .edit-text h2 {
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 1px;
        margin: 0;
        text-align: center;
        color: white;
        opacity: 0.9;
    }

/* Hide admin-header on realtor admin panel */
.admin-header {
    display: none !important;
}

/* Modern Side Navigation Bar */
.side-nav-container {
    position: relative;
    z-index: 1000;
}

.side-nav-toggle {
    position: static; /* inside unified topbar */
    width: 50px;
    height: 50px;
    background: #0037da;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 55, 218, 0.3);
    transition: all 0.3s ease;
    border: 2px solid #0037da;
}

    .side-nav-toggle:hover {
        background: #0028a3;
        border-color: #0028a3;
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0, 55, 218, 0.4);
    }

    .side-nav-toggle i {
        color: white;
        font-weight: 600;
    }

.side-nav {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100vh;
    height: 100dvh; /* modern mobile viewport height for iOS/Android */
    background: white;
    color: #333;
    z-index: 1002;
    transition: right 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* smooth, native momentum scroll on iOS */
    overscroll-behavior: contain; /* prevent body scroll chaining */
    touch-action: pan-y; /* allow vertical panning */
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.15);
    border-left: 1px solid #e9ecef;
}

    .side-nav.active {
        right: 0;
    }

.side-nav-header {
    padding: 30px 25px 20px;
    border-bottom: 1px solid #e9ecef;
    position: relative;
    background: linear-gradient(135deg, #0037da 0%, #4a6bf5 50%, #0037da 100%);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
    margin: -1px -1px 0 -1px;
    border-radius: 0 0 15px 15px;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.side-nav-close {
    position: absolute;
    top: 16px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 2; /* ensure above title */
}

    .side-nav-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
    }

.side-nav-user {
    text-align: center;
    margin-top: 20px;
    width: 100%;
}

.user-avatar {
    display: none;
}

.side-nav-user h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
    width: 100%;
    padding: 15px 48px 15px 16px; /* add right padding to avoid overlap with close btn */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.side-nav-content {
    padding: 20px 0;
}

.side-nav-section {
    margin-bottom: 30px;
}

    .side-nav-section h4 {
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 25px 15px;
        color: #0037da;
        opacity: 0.9;
        border-bottom: 1px solid #e9ecef;
        padding-bottom: 8px;
    }

.side-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .side-nav-menu li {
        margin: 0;
    }

    .side-nav-menu a {
        display: flex;
        align-items: center;
        padding: 15px 25px;
        color: #333;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        transition: all 0.3s ease;
        border-left: 3px solid transparent;
    }

        .side-nav-menu a:hover {
            background: #f8f9fa;
            border-left-color: #0037da;
            transform: translateX(5px);
            color: #0037da;
        }

    .side-nav-menu i {
        width: 20px;
        margin-right: 15px;
        font-size: 16px;
        color: #0037da;
        opacity: 0.9;
    }

/* Mobile Responsive */
/* Media query moved to end of file */

/* Admin Bottom Navigation Active State - consolidated below at line ~4858 */

/* Consistent Button Heights for New Application */
#new-application-section .btn {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    padding: 10px 16px;
    border: none;
    transition: all 0.3s ease;
}

#new-application-section .btn-back {
    background-color: #f8f9fa;
    color: #666;
    border: 1px solid #e1e5e9;
}

    #new-application-section .btn-back:hover {
        background-color: #e9ecef;
        color: #333;
    }

#new-application-section .btn-next {
    background-color: #0046e5;
    color: white;
    border: 1px solid #0046e5;
}

    #new-application-section .btn-next:hover {
        background-color: #0037da;
        border-color: #0037da;
    }

#new-application-section .btn-save {
    background-color: #00ff41;
    color: #111827;
    border: 1px solid #00ff41;
}

    #new-application-section .btn-save:hover {
        background-color: #218838;
        border-color: #218838;
    }


/* Main card and form styles */
.main-card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card-content {
    padding: 20px;
    /* Add padding to the content area instead */
}

.form-row:last-child {
    margin-bottom: 0;
    /* Remove margin from last form row */
}

.card-footer {
    background-color: #f5f5f5;
    text-align: center;
    margin-top: 0;
    /* Remove top margin */
    width: 100%;
}

.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.label-col {
    flex: 1;
    font-size: 16px;
    font-weight: 400;
    padding-right: 15px;
}

.input-col {
    flex: 1;
}

/* Global form controls and selects - exclude authentication pages */
.form-control:not(.login-container .form-control):not(.auth-card .form-control):not(.registration-card .form-control),
.form-select:not(.login-container .form-select):not(.auth-card .form-select):not(.registration-card .form-select) {
    height: 44px;
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 8px 15px;
    text-align: left;
    font-weight: 500;
    font-size: 16px;
}

.position-relative {
    position: relative;
}

.dollar-prefix {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 500;
}

.section-divider {
    margin-top: 30px;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}

.edit-link-container {
    text-align: center;
}

.edit-link {
    color: #000;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
    padding: 10px 0;
}

.action-button {
    background-color: #00ff41;
    color: white;
    border: none;
    margin: 0 20px;
    width: calc(100% - 40px);
    padding: 15px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
}

/* Bottom Navigation styles */
.bottom-nav {
    background-color: white;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 12px 0;
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    padding: 6px 2px;
    border-radius: 8px;
}
.btn-close:hover{
    background-color: #0037da;
    color: white !important;
}
/* Bottom nav active state - consolidated below at single location */

.nav-icon {
    font-size: 20px;
    margin-bottom: 5px;
}

.new-apps-btn {
    background-color: #0037da;
    color: white;
    border: 1px solid #6e92ff;
    border-radius: 4px;
    border-radius: 10px;
    font-size: 14px;
}

.dropdown-container {
    position: relative;
    display: inline-flex; /* replaces inline-block to avoid float rule conflict */
    justify-content: flex-end;
    margin-right: 10px;
}

.dropdown-toggle {
    background-color: #0037da;
    color: white;
    border: 1px solid white;
    border-radius: 4px;
    padding: 8px 15px;
    text-align: left;
    width: 120px;
}

    .dropdown-toggle::after {
        float: right;
        margin-top: 8px;
    }

.client-card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    margin: 12px 10px;
    padding: 15px;
    position: relative;
}

.highlight-card {
    background-color: #f0ffe0;
}

.client-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
}

.client-status {
    font-size: 14px;
    color: #555;
    margin-bottom: 0;
}

.client-price {
    position: absolute;
    top: 15px;
    right: 50px;
    font-size: 18px;
    font-weight: bold;
}

.loan-type {
    position: absolute;
    top: 40px;
    right: 50px;
    font-size: 14px;
    color: #555;
}

.pre-approved {
    font-size: 13px;
    color: #666;
}

.not-eligible {
    color: red;
    font-size: 14px;
}

.action-buttons {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.action-btn {
    flex: 1;
    padding: 12px 8px;
    text-align: center;
    border-radius: 8px;
    background-color: white;
    border: 1px solid #e2e8f0;
    color: #4a5568;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

.action-btn:hover {
    background-color: #f7fafc;
    border-color: #cbd5e0;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Icon-only styling for action buttons */
.action-btn i {
    font-size: 16px;
    margin: 0;
}

/* Specific icon colors */
i.fas.fa-phone.action-icon {
    color: #4CAF50;
}

i.fas.fa-envelope.action-icon {
    color: #003fff;
}

i.fas.fa-dollar.action-icon {
    color: #FF5722;
}

/* Icon colors for button backgrounds */
.action-btn[onclick*="mailto"] i,
.application-action-btn[onclick*="mailto"] i {
    color: #10b981;
}

.action-btn[onclick*="tel"] i,
.application-action-btn[onclick*="tel"] i {
    color: #f59e0b;
}

.action-btn[onclick*="InitiateEditApplication"] i,
.application-action-btn[onclick*="InitiateEditApplication"] i {
    color: #6b7280;
}

/* Hide text in action buttons, show only icons */
.action-btn span {
    display: none;
}

/* Special styling for "See Options" button - keep text visible */
.action-btn[onclick*="LoadLoanOptions"] span,
.action-btn[onclick*="LoadSelectedLoanOption"] span {
    display: inline !important;
    margin-left: 4px;
    font-size: 12px;
    font-weight: 500;
}

/* Make "See Options" button wider to accommodate text */
.action-btn[onclick*="LoadLoanOptions"],
.action-btn[onclick*="LoadSelectedLoanOption"] {
    flex: 1.5 !important;
    min-width: 120px;
}

/* Ensure action buttons work in all contexts */
.client-card .action-buttons,
.application-card .action-buttons,
.applications-list-view .action-buttons {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 15px;
}

/* Specific styling for different button types */
.action-btn[onclick*="LoadLoanOptions"],
.action-btn[onclick*="LoadSelectedLoanOption"],
.application-action-btn[onclick*="LoadLoanOptions"],
.application-action-btn[onclick*="LoadSelectedLoanOption"] {
    background: white;
    color: #0037da;
    border-color: #e2e8f0;
    flex: 1.5 !important;
    min-width: 120px;
}

.action-btn[onclick*="LoadLoanOptions"]:hover,
.action-btn[onclick*="LoadSelectedLoanOption"]:hover,
.application-action-btn[onclick*="LoadLoanOptions"]:hover,
.application-action-btn[onclick*="LoadSelectedLoanOption"]:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
}

/* Eye icon color for View Options button */
.action-btn[onclick*="LoadLoanOptions"] i.fas.fa-eye,
.action-btn[onclick*="LoadSelectedLoanOption"] i.fas.fa-eye,
.application-action-btn[onclick*="LoadLoanOptions"] i.fas.fa-eye,
.application-action-btn[onclick*="LoadSelectedLoanOption"] i.fas.fa-eye {
    color: #0037da;
    margin-right: 10px;
}

/* Eye icon color for View Selected button */
.action-btn[onclick*="LoadSelectedLoanOption"] i.fas.fa-eye,
.application-action-btn[onclick*="LoadSelectedLoanOption"] i.fas.fa-eye {
    color: #0037da;
    margin-right: 10px;
}

.action-btn[onclick*="mailto"],
.application-action-btn[onclick*="mailto"] {
    background: white;
    color: #10b981;
    border-color: #e2e8f0;
}

.action-btn[onclick*="mailto"]:hover,
.application-action-btn[onclick*="mailto"]:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
}

.action-btn[onclick*="tel"],
.application-action-btn[onclick*="tel"] {
    background: white;
    color: #f59e0b;
    border-color: #e2e8f0;
}

.action-btn[onclick*="tel"]:hover,
.application-action-btn[onclick*="tel"]:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
}

.action-btn[onclick*="InitiateEditApplication"],
.application-action-btn[onclick*="InitiateEditApplication"] {
    background: white;
    color: #6b7280;
    border-color: #e2e8f0;
}

.action-btn[onclick*="InitiateEditApplication"]:hover,
.application-action-btn[onclick*="InitiateEditApplication"]:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
}



.action-icon {
    margin: 0;
    font-size: 16px;
}

.menu-icon {
    position: absolute;
    top: 20px;
    right: 15px;
}

/* ----------------- LOAN VIEW STYLES ----------------- */
.loan-card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    margin: 15px 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.loan-header {
    padding: 0px;
    position: relative;
}

.quicken-logo {
    color: #e31937;
    font-weight: bold;
    font-size: 24px;
    font-style: italic;
    position: relative;
    top: -5px;
}

.quicken-tag {
    color: #666;
    font-size: 10px;
    font-style: italic;
    position: relative;
    top: -5px;
}

.rating {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 14px;
}

.star {
    color: #ffb400;
    margin-right: 5px;
}

.review-count {
    color: #666;
    font-size: 12px;
    margin-left: 3px;
}

.loan-type-badge {
    background-color: #222;
    color: white;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    position: absolute;
    top: 45px;
    right: 15px;
}

.loan-details {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    border-top: 1px solid #f0f0f0;
}

.detail-column {
    flex: 1;
    text-align: left;
}

.detail-heading {
    color: #666;
    font-size: 14px;
    margin-bottom: 5px;
}

.detail-value {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 0;
}

.detail-subtext {
    color: #888;
    font-size: 12px;
}

.savings-row {
    background-color: #0237da;
    padding: 10px 15px;
    border-top: 1px solid #0237da;
}

.savings-label {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}

.savings-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.savings-value {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
}

.cash-badge {
    background-color: black;
    color: white;
    border-radius: 15px;
    padding: 3px 8px;
    font-size: 11px;
    margin-right: 5px;
}

.view-details {
    text-align: center;
    padding: 12px;
    color: #555;
    font-weight: 500;
    cursor: pointer;
    border-top: 1px solid #f0f0f0;
}

.expanded-details {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease;
}

    .expanded-details.show {
        max-height: max-content;
        padding: 15px;
        border-top: 1px solid #f0f0f0;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
        margin: 15px 10px;
        overflow: hidden;
        transition: all .3sease;
    }

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

.detail-section-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.tools-container {
    display: flex;
    justify-content: center;
    background-color: #f6f6f6;
    padding: 15px 0;
    margin-bottom: 20px;
}

.tool-item {
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
}

.tool-icon {
    margin-right: 10px;
    color: #3333CC;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.detail-label {
    color: #333;
    font-size: 14px;
}

.detail-amount {
    font-weight: 500;
    font-size: 14px;
    text-align: right;
}

.select-btn {
    background-color: #2763ff;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    width: 100%;
    font-weight: bold;
    margin-top: 10px;
}

#applications-section .see-all-results {
    text-align: center;
    margin: 20px 0;
    color: #333;
    font-size: 16px;
}

.result-count {
    background-color: #e0e0e0;
    border-radius: 50%;
    padding: 2px 8px;
    margin-left: 5px;
    font-size: 14px;
}

.pre-qualify-btn {
    background-color: #00ff41;
    color: rgb(0, 0, 0);
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    width: 95%;
    margin: 0 auto 20px;
    display: block;
    font-weight: bold;
    font-size: 16px;
}

/* ----------------- QUICK LOAN QUOTE STYLES ----------------- */
/* (Many rules remain unchanged as provided.) */
.rates-card {
    padding: 20px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    margin: 15px;
}

.rates-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.live-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ff3b30;
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.6);
    animation: livePulse 1.6s ease-out infinite;
}

@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.6); }
    70% { box-shadow: 0 0 0 10px rgba(255, 59, 48, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

.slider-container {
    margin-bottom: 20px;
}

.custom-range {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #3333cc 0%, #87cefa 100%);
}

.rate-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.rate-type {
    font-weight: 500;
}

.rate-value {
    font-weight: 700;
}

.apr {
    color: #777;
    font-size: 12px;
    margin-left: 5px;
}

.features-section {
    display: flex;
    justify-content: center;
    background-color: #f6f6f6;
    padding: 15px 0;
    margin-bottom: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
}

.feature-icon {
    margin-right: 10px;
    color: #3333cc;
}

.funnel-container {
    overflow: hidden;
    margin-bottom: 80px;
}

.funnel-stage {
    text-align: center;
    color: white;
    padding: 15px 0;
}

.funnel-amount {
    font-size: 24px;
    font-weight: 700;
}

.funnel-label {
    font-size: 12px;
}

.stage-1 {
    background-color: #ffffff;
    color: #333;
    clip-path: polygon(0% 0, 100% 0, 95% 100%, 5% 100%);
    margin-bottom: 10px;
    padding: 15px;
    text-align: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.stage-2 {
    background-color: #d0ddff;
    color: #333;
    clip-path: polygon(5% 0, 95% 0, 90% 100%, 10% 100%);
    margin-top: -3px;
    margin-bottom: 10px;
    padding: 15px;
    text-align: center;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

.stage-3 {
    background-color: #00ff41;
    color: #000000;
    clip-path: polygon(10% 0, 90% 0, 85% 100%, 15% 100%);
    margin-top: -3px;
    border-radius: 0 0 15px 15px;
    margin-bottom: 10px;
    padding: 15px;
    text-align: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.stats-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    max-width: 900px;
    margin: 0 auto;
}

.stat-card {
    background-color: rgba(40, 80, 200, 0.5);
    border-radius: 12px;
    padding: 15px 15px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.amount {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.label {
    font-size: 14px;
    opacity: 0.9;
}

/* ----------------- NEW LOAN APPLICATION & EDIT APPLICATION STYLES ----------------- */
/* (These styles are taken without modification from provided code.) */
.agent-title,
.greeting { font-weight: 600; }

.application-info,
.application-form,
.section-title,
.form-group,
.form-label,
.input-group,
.with-dollar-sign,
.select-control,
.btn-save,
.back-button { display: inherit; }

/* ----------------- EDIT APPLICATION STYLES ----------------- */
.header.edit-header {
    background-color: #0039c6;
}

.edit-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-left: 20px;
}

.applicant-name {
    font-size: 22px;
    font-weight: 600;
    margin-left: 20px;
}

.main-card {
    background-color: white;
    border-radius: 8px;
    margin: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.label-col {
    flex: 1;
    font-size: 16px;
    font-weight: 400;
    padding-right: 15px;
}

.input-col {
    flex: 1;
}

/* Global input and select controls - exclude authentication pages */
input.form-control:not(.login-container input.form-control):not(.auth-card input.form-control):not(.registration-card input.form-control),
select.form-select:not(.login-container select.form-select):not(.auth-card select.form-select):not(.registration-card select.form-select) {
    height: 44px;
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 8px 15px;
    text-align: left;
    font-weight: 500;
    font-size: 16px;
}

.client-status {
    display: flex;
    align-items: center;
    gap: 5px;
}

.check-icon {
    color: #4CAF50;
    /* Green color */
    font-size: 16px;
    /* Match your text size or adjust as needed */
}

.under-icon {
    color: #ed442e;
    /* Green color */
    font-size: 16px;
    /* Match your text size or adjust as needed */
}

.position-relative {
    position: relative;
}

.dollar-prefix {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 500;
}

.edit-link {
    text-align: center;
    margin: 15px;
    color: #333;
    font-size: 14px;
    padding: 5px;
}

.action-button {
    background-color: #00ff41;
    color: white;
    border: none;
    margin: 0 20px;
    width: calc(100% - 40px);
    padding: 15px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
}

.results-link {
    text-align: center;
    display: block;
    margin: 15px 0;
    color: #333;
    text-decoration: none;
}

.badge {
    background-color: #ddd;
    border-radius: 50%;
    padding: 2px 6px;
    margin-left: 5px;
    font-size: 12px;
}

/* Quick Quote Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: max-content;
    animation: slideUp 0.3s;
    z-index: 9000;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

.hidden-section {
    display: none;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
/* Specific styles for New Loan Application Section */
.btn-save {
    background-color: #00ff41; /* Matches action-button color */
    color: #111827;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
}

/* Ensure form sections are hidden by default unless active */
#new-application-section .form-section {
    display: none;
}

    #new-application-section .form-section.active {
        display: block;
    }

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}

.greeting {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
}

.calculator-card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin: 0 auto;
    max-width: 420px;
    padding: 20px;
}

.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.form-label {
    flex: 1;
    font-weight: 500;
    color: #333;
}

/* Global form control flex styles - exclude authentication pages */
.form-control:not(.login-container .form-control):not(.auth-card .form-control):not(.registration-card .form-control) {
    flex: 1;
    text-align: left;
    font-weight: 500;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px 12px;
}

.input-group-text {
    background-color: white;
    border-right: none;
}

.result-section {
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

.result-title {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 15px;
}

.result-row {
    display: flex;
    margin-bottom: 10px;
}

.result-label {
    font-size: 13px;
    color: #666;
}

.result-value {
    font-weight: 600;
    font-size: 18px;
}

.apr-note {
    font-size: 12px;
    color: #777;
}

.cashout-value {
    color: #2cbb00;
    font-weight: bold;
}

.max-savings {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

.form-check-input[type="checkbox"] {
    width: 50px;
    height: 24px;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #333;
}

input:focus + .slider {
    box-shadow: 0 0 1px #333;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* ----------------- SHARED BOTTOM NAVIGATION ----------------- */
.bottom-nav {
    background-color: white;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 12px 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-around;
    z-index: 1000;
}

    .bottom-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        color: #333;
        text-decoration: none;
        min-width: 0; /* Allow flex items to shrink */
        flex: 1; /* Distribute space evenly */
        padding: 0 4px; /* Add some padding */
    }

    .bottom-nav .nav-item div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        text-align: center;
        font-size: 11px; /* Slightly smaller font for better fit */
        line-height: 1.2;
        margin-top: 2px;
    }

.nav-icon {
    font-size: 20px;
    margin-bottom: 5px;
}

/* ----------------- PAGE / SECTION VISIBILITY ----------------- */
.section {
    display: none !important;
}

    .section.active {
        display: block !important;
    }

/* ----------------- Error bar and messages ----------------- */

.error-bar {
    margin: 20px;
    display: none;
}

    .error-bar.active {
        display: block;
    }

/* Enhanced Down Payment Selector Styling */
.down-payment-selector-container {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    margin-top: 15px;
}

.slider-value-display {
    text-align: center;
    margin-bottom: 15px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #0241da, #0056b3);
    color: #ffffff;
    border-radius: 20px;
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(2, 65, 218, 0.3);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    min-width: 80px;
}



.preset-btn {
    border: 2px solid #0241da;
    color: #0241da;
    background: transparent;
    transition: all 0.3s ease;
    font-weight: 500;
    min-width: 60px;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
}

    .preset-btn:hover {
        background: #0241da;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(2, 65, 218, 0.3);
    }

    .preset-btn.active {
        background: #0241da;
        color: #ffffff;
        box-shadow: 0 2px 4px rgba(2, 65, 218, 0.4);
    }

.slider-container {
    position: relative;
    padding: 20px 10px 20px 10px;
}

.enhanced-slider {
    width: 100%;
    height: 14px;
    border-radius: 7px;
    background: #f0f0f0;
    border: 2px solid #0241da;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

    .enhanced-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #0241da;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        border: 3px solid #ffffff;
        transition: all 0.3s ease;
        z-index: 10;
    }

        .enhanced-slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(2, 65, 218, 0.5);
        }

    .enhanced-slider::-moz-range-thumb {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #0241da;
        cursor: pointer;
        border: 3px solid #ffffff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        transition: all 0.3s ease;
    }

        .enhanced-slider::-moz-range-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(2, 65, 218, 0.5);
        }

    /* Enhanced slider track for better visibility */
    .enhanced-slider::-webkit-slider-runnable-track {
        background: #f0f0f0;
        height: 14px;
        border-radius: 7px;
        border: 2px solid #0241da;
    }

    .enhanced-slider::-moz-range-track {
        background: #f0f0f0;
        height: 14px;
        border-radius: 7px;
        border: 2px solid #0241da;
    }

/* Compact Down Payment Box */
.down-payment-compact-box {
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 12px;
    margin-top: 5px;
}

    .down-payment-compact-box .down-payment-selector-container {
        background: transparent;
        border: none;
        padding: 0;
        margin-top: 0;
        box-shadow: none;
    }

    .down-payment-compact-box .preset-buttons {
        margin-bottom: 10px;
    }

    .down-payment-compact-box .preset-btn {
        padding: 4px 8px;
        font-size: 12px;
        margin: 2px;
        min-width: 50px;
    }

    .down-payment-compact-box .slider-container {
        margin-top: 8px;
        padding: 15px 10px 15px 10px;
    }

    .down-payment-compact-box .slider-value-display {
        margin-bottom: 5px;
        font-size: 16px;
        padding: 6px 12px;
        min-width: 70px;
    }

    .down-payment-compact-box .enhanced-slider {
        height: 12px;
        background: #f0f0f0;
        border: 2px solid #0241da;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    }

/* Down Payment Amount Display */


    .down-payment-amount-display .amount-input {
        font-size: 18px;
        font-weight: 600;
        color: #0241da;
        text-align: center;
        border: none;
        background: transparent;
        width: 100%;
        outline: none;
        padding: 8px 12px;
        margin: 0;
        font-family: inherit;
        cursor: pointer;
        min-height: 20px;
        display: block;
    }

        .down-payment-amount-display .amount-input:focus {
            border: 2px solid #0241da;
            border-radius: 4px;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(2, 65, 218, 0.1);
        }

        .down-payment-amount-display .amount-input::placeholder {
            color: #999;
            font-weight: 400;
            font-size: 16px;
        }

.slider-markers {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
}

.marker {
    position: absolute;
    width: 2px;
    height: 12px;
    background: #0241da;
    bottom: 0;
    transform: translateX(-50%);
}

    .marker span {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 10px;
        color: #666;
        font-weight: 500;
        white-space: nowrap;
    }

/* Mobile Responsive */
/* Media query moved to end of file */


.success-bar {
    margin: 20px;
    display: none;
}

    .success-bar.active {
        display: block;
    }
/* ----------------- App Loader Animations ----------------- */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes shimmer {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.2; 
    }
    50% { 
        transform: scale(1.1); 
        opacity: 0.6; 
    }
}

.gif-loader {
    max-width: 250px;
    max-height: 250px;
}

.control-panel {
    text-align: center;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

button {
    background-color: #0037da;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    button:hover {
        background-color: #002ca3;
        color: #fff ;
    }

/* ----------------- Custom overrides ----------------- */
.logo-holder {
    width: 385px;
    margin: 0 auto;
    padding: 20px 0;
}

.logo-realo {
    height: auto;
    width: 100%;
}

#applicationsHolder .action-btn {
    width: 22%;
    text-decoration: none;
}

/* Commented media query removed */
/* Media query moved to end of file */



.ratesRowHolder {
    display: none;
}

    .ratesRowHolder.active {
        display: block;
    }

/* Media query moved to end of file */

.error-bar.active {
    display: block;
    background-color: white;
    border-width: thin;
}

/* Year Buttons Styling */
.year-buttons-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 12px 0;
    flex-wrap: wrap;
}

.year-btn {
    padding: 8px 16px;
    border: 2px solid #0241da;
    color: #0241da;
    background: transparent;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 80px;
}

    .year-btn:hover {
        background: #0241da;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(2, 65, 218, 0.3);
    }

    .year-btn.active {
        background: #0241da;
        color: #ffffff;
        border-color: #0241da;
        box-shadow: 0 4px 8px rgba(2, 65, 218, 0.3);
    }

/* Media query moved to end of file */

/* ===== AUTHENTICATION PAGES STYLING ===== */

/* Enhanced Login Container */
.login-container {
    background: #0046e5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

    .login-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
        opacity: 0.2;
        pointer-events: none;
    }

/* Enhanced Login Brand */
.login-brand {
    margin-bottom: 30px;
    text-align: center;
    z-index: 1;
    position: relative;
}

    .login-brand img {
        max-width: 200px;
        height: auto;
        filter: brightness(0) invert(1);
    }

/* Enhanced Login Title */
.login-title {
    color: white;
    font-size: 16px;
    letter-spacing: 4px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 300;
    text-transform: uppercase;
    z-index: 1;
    position: relative;
}

/* Enhanced Auth Card */
.auth-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px 30px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 1;
    position: relative;
}

/* Welcome Section */
.welcome-section {
    text-align: center;
    margin-bottom: 30px;
}

.welcome-title {
    font-size: 28px;
    font-weight: 700;
    color: #0046e5;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.welcome-tagline {
    font-size: 16px;
    color: #666;
    font-weight: 400;
    margin: 0;
}

/* Enhanced Login Form */
.login-form {
    width: 100%;
}

.registration-form-title {
    font-size: 20px;
    font-weight: 600;
    color: #0046e5;
    margin-bottom: 25px;
    text-align: center;
}

/* Enhanced Form Controls - Authentication Pages Only */
.login-container .login-input,
.login-container .form-control,
.auth-card .form-control,
.registration-card .form-control {
    background: #ffffff;
    border: 2px solid #e1e5e9;
    border-radius: 12px;
    padding: 16px 20px;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    transition: all 0.3s ease;
    direction: ltr !important;
    text-align: left !important;
    box-sizing: border-box;
    min-height: 44px;
    line-height: 1.5;
}

    .login-container .login-input:focus,
    .login-container .form-control:focus,
    .auth-card .form-control:focus,
    .registration-card .form-control:focus {
        outline: none;
        border-color: #0046e5;
        box-shadow: 0 0 0 4px rgba(0, 70, 229, 0.1);
        transform: translateY(-1px);
    }

    .login-container .login-input::placeholder,
    .login-container .form-control::placeholder,
    .auth-card .form-control::placeholder,
    .registration-card .form-control::placeholder {
        color: #999;
        font-weight: 400;
    }

/* Ensure select elements in auth pages have proper height */
.login-container select.form-control,
.auth-card select.form-control,
.registration-card select.form-control {
    height: auto;
    min-height: 44px;
    padding-top: 16px;
    padding-bottom: 16px;
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}

/* Enhanced Buttons */
.login-button,
.btn-reset,
.btn-register,
.btn-start,
.btn-next {
    background: #00ff41 !important;
    border: none !important;
    border-radius: 12px !important;
    color: #000000 !important;
    padding: 16px 24px !important;
    width: 100% !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 255, 65, 0.3) !important;
}

    .login-button:hover,
    .btn-reset:hover,
    .btn-register:hover,
    .btn-start:hover,
    .btn-next:hover {
        background: #00e639 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(0, 255, 65, 0.4) !important;
    }

.btn-back {
    background: #f8f9fa !important;
    border: 2px solid #e1e5e9 !important;
    color: #666 !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

    .btn-back:hover {
        background: #e9ecef !important;
        border-color: #adb5bd !important;
        transform: translateY(-1px) !important;
    }

/* Form Labels */
.form-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .form-label.required::after {
        content: ' *';
        color: #dc3545;
    }

/* Links Styling */
.forgot-link,
.account-link {
    color: #0046e5;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .forgot-link:hover,
    .account-link:hover {
        color: #0037da;
        text-decoration: underline;
    }

/* Enhanced Back to Login Button */
.back-to-login {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e1e5e9;
}

    .back-to-login a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #0046e5;
        text-decoration: none;
        font-weight: 600;
        font-size: 16px;
        padding: 12px 24px;
        background: #f8f9fa;
        border: 2px solid #e1e5e9;
        border-radius: 12px;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

        .back-to-login a:hover {
            background: #e9ecef;
            border-color: #0046e5;
            color: #0046e5;
            text-decoration: none;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 70, 229, 0.2);
        }

        .back-to-login a::before {
            content: '←';
            font-size: 18px;
            font-weight: bold;
        }

/* Account Actions */
.account-actions {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e1e5e9;
}

.account-question {
    color: #666;
    font-size: 16px;
    margin-bottom: 15px;
}

.account-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.account-link {
    padding: 12px 20px;
    background: #f8f9fa;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .account-link:hover {
        background: #e9ecef;
        border-color: #0046e5;
        text-decoration: none;
    }

/* Website Link */
.website-link {
    text-align: center;
    margin-top: 20px;
    z-index: 1;
    position: relative;
}

    .website-link p {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        margin: 0;
    }

    .website-link a {
        color: white;
        text-decoration: none;
        font-weight: 500;
    }

        .website-link a:hover {
            text-decoration: underline;
        }

/* Support Card */
.support-card {
    text-align: center;
    margin-top: 20px;
    z-index: 1;
    position: relative;
}

    .support-card p {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        margin: 0;
    }

    .support-card a {
        color: white;
        text-decoration: none;
        font-weight: 500;
    }

        .support-card a:hover {
            text-decoration: underline;
        }

/* Registration Card */
.registration-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px 30px;
    width: 100%;
    /*max-width: 500px;*/
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin: 0 auto;
}

/* Media query moved to end of file */

/* Media query moved to end of file */

/* Media query moved to end of file */

.card-section {
    width: 100%;
}

/* Enhanced Stepper Styling */
.stepper-container {
    margin-bottom: 30px;
    z-index: 1;
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stepper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: relative;
}

    .stepper::before {
        content: '';
        position: absolute;
        top: 16px;
        left: 30px;
        right: 30px;
        height: 2px;
        background: #e1e5e9;
        z-index: 0;
    }

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.4;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

    .step.active {
        opacity: 1;
    }

    .step.completed {
        opacity: 0.8;
    }

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f8f9fa;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 2px solid #e1e5e9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.step.active .step-number {
    background: #0046e5;
    color: white;
    border-color: #0046e5;
    box-shadow: 0 4px 12px rgba(0, 70, 229, 0.25);
    transform: scale(1.05);
}

.step.completed .step-number {
    background: #00ff41;
    color: #111827;
    border-color: #00ff41;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.25);
}

.step-label {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    transition: all 0.3s ease;
    line-height: 1.2;
}

.step.active .step-label {
    color: #0046e5;
    font-weight: 700;
}

.step.completed .step-label {
    color: #00ff41;
    font-weight: 600;
}

/* Compact Stepper Design */
.compact-stepper {
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stepper-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    position: relative;
}

    .stepper-tabs::before {
        content: '';
        position: absolute;
        top: 50%;
        height: 1px;
        background: #e1e5e9;
        z-index: 0;
        transform: translateY(-600%);
    }

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.4;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    min-width: 60px;
}

    .tab-item.active {
        opacity: 1;
        background: rgba(0, 70, 229, 0.1);
    }

    .tab-item.completed {
        opacity: 0.8;
    }

.tab-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f8f9fa;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.3s ease;
    border: 1px solid #e1e5e9;
}

.tab-item.active .tab-number {
    background: #0046e5;
    color: white;
    border-color: #0046e5;
    box-shadow: 0 2px 6px rgba(0, 70, 229, 0.2);
    transform: scale(1.1);
}

.tab-item.completed .tab-number {
    background: #00ff41;
    color: #111827;
    border-color: #00ff41;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.2);
}

.tab-text {
    font-size: 10px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    transition: all 0.3s ease;
    line-height: 1;
}

.tab-item.active .tab-text {
    color: #0046e5;
    font-weight: 700;
}

.tab-item.completed .tab-text {
    color: #00ff41;
    font-weight: 600;
}

/* Enhanced Form Styling */
.form-row {
    margin-bottom: 16px;
}

.form-group {
    width: 100%;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
    text-align: center;
    margin:auto
}

.section-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.form-hint {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    display: block;
}

.button-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    gap: 12px;
}

    .button-row .btn {
        flex: 1;
        padding: 10px 16px;
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .button-row .btn-back {
        background: #f8f9fa;
        color: #666;
        border: 1px solid #e1e5e9;
    }

        .button-row .btn-back:hover {
            background: #e9ecef;
            color: #333;
        }

    .button-row .btn-next {
        background: #0046e5;
        color: white;
        border: 1px solid #0046e5;
    }

        .button-row .btn-next:hover {
            background: #0037da;
            border-color: #0037da;
        }

/* Mobile Form Optimization */
/* Media query moved to end of file */

/* Form Sections */
.form-section {
    display: none;
}

    .form-section.active {
        display: block;
    }

/* Button Groups */
.button-group {
    margin-top: 30px;
}

/* Support Section */
.support-section {
    text-align: center;
    margin-top: 30px;
    z-index: 1;
    position: relative;
}

.support-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin: 0;
}

.phone-number {
    color: white;
    font-weight: 500;
}

/* Error and Success Bars */
.error-bar,
.success-bar {
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-weight: 500;
    border: none;
}

.error-bar {
    background: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.success-bar {
    background: #d4edda;
    color: #155724;
    border-left: 4px solid #00ff41;
}

/* Responsive Design */
/* Media query moved to end of file */

/* Media query moved to end of file */

/* Desktop Dashboard Layout - Only for larger screens */
@media (min-width: 992px) {
    /* Main wrapper for desktop layout */
    .desktop-dashboard-wrapper {
        display: flex;
        height: 100vh;
        overflow: hidden;
        background-color: #f8f9fa;
    }
    
    /* Left sidebar navigation */
    .desktop-sidebar {
        width: 240px;
        background-color: #ffffff;
        box-shadow: 2px 0 5px rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden; /* Prevent horizontal scroll */
        transition: all 0.3s ease;
        position: relative; /* anchor for edge toggle positioning */
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: #cbd5e0 #f7fafc; /* Firefox */
    }
    
    /* Webkit scrollbar styling */
    .desktop-sidebar::-webkit-scrollbar {
        width: 6px;
    }
    
    .desktop-sidebar::-webkit-scrollbar-track {
        background: #f7fafc;
    }
    
    .desktop-sidebar::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 3px;
    }
    
    .desktop-sidebar::-webkit-scrollbar-thumb:hover {
        background: #a0aec0;
    }
    
    .desktop-sidebar.collapsed {
        width: 60px;
    }
    
    /* Sidebar header */
    .desktop-sidebar-header {
        padding: 20px;
        border-bottom: 1px solid #e9ecef;
        background-color: #0037da;
        color: white;
    }
    
    .desktop-sidebar.collapsed .desktop-sidebar-header {
        padding: 16px 10px;
        position: relative;
    }
    
    .desktop-sidebar-logo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    
    .desktop-sidebar-logo img {
        height: 40px;
        transition: all 0.3s ease;
        filter: brightness(0) invert(1); /* make logo white like main app */
    }
    
    .desktop-sidebar.collapsed .desktop-sidebar-logo img {
        height: 30px;
    }
    
    .desktop-sidebar-toggle {
        position: fixed;
        left: 217px;
        top: 80%;
        transform: translateY(-50%);
        width: 16px;
        height: 40px;
        display: inline-flex; align-items: center; justify-content: center;
        background: #ffffff;
        color: #0f172a;
        border: 1px solid rgba(15, 23, 42, 0.08);
        box-shadow: 0 8px 18px rgba(2, 28, 89, 0.18);
        cursor: pointer;
        z-index: 1000;
        transition: left 0.3s ease;
    }
    
    /* Toggle button position when sidebar is collapsed */
    .desktop-sidebar.collapsed .desktop-sidebar-toggle {
        left: 37px;
    }
    
    /* Sidebar navigation */
    .desktop-sidebar-nav {
        flex: 1;
        padding: 20px 0;
    }
    
    .desktop-nav-item {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        color: #495057;
        text-decoration: none;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
    }
    
    .desktop-sidebar.collapsed .desktop-nav-item {
        padding: 10px 12px;
        justify-content: center;
    }
    
    .desktop-nav-item:hover {
        background-color: #f8f9fa;
        color: #0037da;
    }
    
    .desktop-nav-item.active {
        background-color: #e8f0fe;
        color: #0037da;
        border-left: 3px solid #0037da;
    }
    
    .desktop-nav-item i {
        font-size: 20px;
        width: 24px;
        margin-right: 12px;
        text-align: center;
    }
    
    .desktop-sidebar.collapsed .desktop-nav-item i {
        margin-right: 0;
    }
    
    .desktop-nav-item span {
        transition: opacity 0.3s ease;
    }
    
    .desktop-sidebar.collapsed .desktop-nav-item span {
        display: none;
    }
    
    /* Sidebar footer */
    .desktop-sidebar-footer {
        padding: 20px;
        border-top: 1px solid #e9ecef;
    }
    
    .desktop-sidebar.collapsed .desktop-sidebar-footer {
        padding: 20px 10px;
    }
    
    /* Main content area */
    .desktop-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    /* Desktop header removed - styles cleaned up */
    
    /* Hide server-rendered bottom nav when desktop wrapper is present */
    .desktop-dashboard-wrapper #bottom-nav-container { display:none !important; }
    
    /* Main content scroll area */
    .desktop-main-content {
        flex: 1;
        overflow-y: auto;
        padding: 24px;
        background-color: #f8f9fa;
    }
    
    /* Adapt existing sections for desktop */
    .desktop-main-content .container-card {
        max-width: 1200px;
        margin: 0 auto;
        background-color: transparent;
        padding: 0;
    }
    
    /* Hide mobile-only elements on desktop */
    .desktop-dashboard-wrapper .bottom-nav,
    .desktop-dashboard-wrapper .side-nav-container,
    .desktop-dashboard-wrapper .side-nav-toggle {
        display: none !important;
    }
    
    /* Adjust existing components for desktop layout */
    .desktop-main-content .agent-header {
        background-color: #0142da;
        border-radius: 8px;
        margin-bottom: 24px;
        padding: 24px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .desktop-main-content .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-top: 0;
    }
    
    .desktop-main-content .stat-card {
        background-color: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    /* Ensure dark text on desktop stats */
    .desktop-main-content .stat-card .amount { color:#212529; }
    .desktop-main-content .stat-card .label { color:#495057; }
    
    .desktop-main-content .rates-card {
        background-color: #ffffff;
        border-radius: 8px;
        padding: 24px;
        margin-bottom: 24px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .desktop-main-content .features-section,
    .desktop-main-content .funnel-container {
        background-color: #ffffff;
        border-radius: 8px;
        padding: 24px;
        margin-bottom: 24px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    /* Tooltip for collapsed sidebar */
    .desktop-nav-tooltip {
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 10px;
        background-color: #212529;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    
    .desktop-sidebar.collapsed .desktop-nav-item:hover .desktop-nav-tooltip {
        opacity: 1;
    }
    
    /* Desktop specific adjustments for forms */
    .desktop-main-content .calculator-card {
        max-width: 800px;
        margin: 0 auto;
    }
    
    .desktop-main-content .client-card {
        background-color: #ffffff;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 16px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    /* Desktop table view option */
    .desktop-view-toggle {
        display: flex;
        gap: 8px;
        margin-bottom: 20px;
    }
    
    .desktop-view-toggle button {
        padding: 8px 16px;
        border: 1px solid #dee2e6;
        background-color: #ffffff;
        color: #495057;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .desktop-view-toggle button.active {
        background-color: #0037da;
        color: white;
        border-color: #0037da;
    }
    
    /* Responsive grid for desktop */
    .desktop-main-content .features-section {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 24px;
    }
    
    /* Desktop-optimized funnel - Vertical layout with two-column design */
    .desktop-main-content .funnel-container {
        display: grid;
        grid-template-columns: 75% 25%;
        gap: 24px;
        padding: 32px;
        align-items: start;
        width: 100%;
    }
    
    .desktop-main-content .funnel-stages {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .desktop-main-content .funnel-heading {
        font-size: 20px;
        font-weight: 600;
        color: #212529;
        margin-bottom: 16px;
        padding: 0 20px;
    }
    
    .desktop-main-content .funnel-heading {
        font-size: 24px;
        font-weight: 700;
        color: #333;
        margin-bottom: 20px;
        text-align: center;
        padding: 0 20px;
    }
    
    /* Mobile funnel heading alignment */
    @media (max-width: 768px) {
        .funnel-heading {
            text-align: center !important;
            font-size: 20px !important;
            margin-bottom: 16px !important;
        }
        
        h3.funnel-heading {
            text-align: center;
        }
    }
    
    .desktop-main-content .funnel-stage {
        display: block;
        align-items: center;
        padding: 20px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        position: relative;
        width: 100%;
    }
    
    .desktop-main-content .funnel-stage:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        width: 2px;
        height: 20px;
        background-color: #dee2e6;
        transform: translateX(-50%);
    }
    
    .desktop-main-content .funnel-amount {
        font-size: 24px;
        font-weight: 600;
        color: #0037da;
        margin-right: 16px;
    }
    
    .desktop-main-content .funnel-label {
        font-size: 16px;
        color: #495057;
        font-weight: 500;
    }
    
    /* Desktop features section */
    .desktop-main-content .features-section {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 24px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        height: 100%;
        min-height: 300px;
    }
    
    .desktop-main-content .features-section .feature-item {
        display: flex;
        align-items: center;
        padding: 12px;
        border-radius: 6px;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .desktop-main-content .features-section .feature-item:hover {
        background-color: #f8f9fa;
        transform: translateX(4px);
    }
    
    .desktop-main-content .features-section .feature-icon {
        width: 32px;
        height: 32px;
        background: #0037da;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        color: white;
        font-size: 14px;
    }
    
    /* Desktop color tweak for stage-1 */
    .desktop-main-content .stage-1 { background-color: #fff7e7; }
    .desktop-main-content .stage-2 { background-color: #e8f0fe; }
    .desktop-main-content .stage-3 { background-color: #e8f5e8; }
    
    /* Ensure consistent funnel stage colors across all platforms */
    .funnel-stage.stage1,
    .stage-1 {
        background-color: #fff7e7 !important;
    }
    
    .funnel-stage.stage2,
    .stage-2 {
        background-color: #e8f0fe !important;
    }
    
    .funnel-stage.stage3,
    .stage-3 {
        background-color: #e8f5e8 !important;
    }

    /* Consistent desktop container spacing */
    .desktop-main-content .container-card,
    .desktop-main-content .rates-card,
    .desktop-main-content .features-section,
    .desktop-main-content .funnel-container,
    .desktop-main-content .calculator-card,
    .desktop-main-content .client-card { max-width: 1200px; margin-left:auto; margin-right:auto; }

    /* Remove any full-width bleed on desktop */
    .desktop-main-content .section > *:not(.container-card):not(.rates-card):not(.features-section):not(.funnel-container):not(.calculator-card):not(.client-card) { max-width: 1200px; margin-left:auto; margin-right:auto; }

    /* Hide back button and edit headers on desktop */
    .desktop-main-content .back-button,
    .desktop-main-content .edit-header { display:none !important; }
    /* Keep quickrate header hidden only when inside unified topbar wrapper */
    .unified-topbar-wrapper { display:none !important; }

    /* Hide agent-header custom-quickrate on desktop mode - EXCEPT dashboard */
    .desktop-main-content .agent-header.custom-quickrate.applications-header { display:none !important; }
    
    /* Keep dashboard header visible on desktop */
    .desktop-main-content .agent-header.custom-quickrate.dashboard-header { display:block !important; }
    
    /* Hide ALL agent-header custom-quickrate on desktop */
    .desktop-main-content .agent-header.custom-quickrate { display:none !important; }
    
    /* Hide unified-topbar on desktop */
    .desktop-main-content .unified-topbar { display:none !important; }
    
    /* Hide tools-container across all sections */
    .tools-container { display:none !important; }
    
    /* Hide pre-qualify button on desktop */
    .desktop-main-content .pre-qualify-btn {
        display: none !important;
    }

    /* Agent name visibility in header card */
    #dashboard-agent-name, #dashboard-agent-name-side-nav { color:#ffffff !important; }

    /* Fix button sizing on desktop - prevent full width */
    .desktop-main-content .btn.btn-next {
        width: auto !important;
        min-width: 120px !important;
        max-width: 200px !important;
    }
    
    .desktop-main-content .btn.px-4.py-2 {
        width: auto !important;
        min-width: 120px !important;
        max-width: 200px !important;
    }
    
    /* Applications Header Section - Hide when new compact header is present */
    .applications-header-section {
        background: white;
        padding: 24px 30px;
        border-radius: 12px;
        margin-bottom: 24px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border: 1px solid #e9ecef;
        display: none !important; /* Hide old header when new compact header is used */
    }
    
    /* Mobile fixes - all in one place */
    @media (max-width: 768px) {
        /* Hide applications header section */
        .applications-header-section {
            display: none !important;
        }
        
        /* Fix status dropdown width to 80px */
        .status-dropdown.apps-status {
            flex: 0 0 80px !important;
            min-width: 80px !important;
            max-width: 80px !important;
        }
        
        /* Center funnel heading */
        .funnel-heading,
        h3.funnel-heading {
            text-align: center !important;
        }
        
        /* Mobile list view - simplified layout */
        .list-view-table {
            display: none !important;
        }
        
        .applications-list-view.active {
            display: block !important;
        }
        
        .applications-list-view.active .mobile-list-item {
            background: white !important;
            border-radius: 12px !important;
            padding: 16px !important;
            margin-bottom: 12px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
            border: 1px solid #e9ecef !important;
        }
        
        /* Mobile List Item Status Borders and Backgrounds - Override default */
        .applications-list-view.active .mobile-list-item.status-pre-qualified {
            border: 1px solid #9cdda0 !important; /* Light green for Pre Qualified */
            background: #f6fff6 !important; /* Light green background */
        }
        
        .applications-list-view.active .mobile-list-item.status-not-eligible {
            border: 1px solid #fc3100 !important; /* Light red for Not Eligible */
            background: #fff6f6 !important; /* Light red background */
        }
        
        .applications-list-view.active .mobile-list-item.status-underwriting {
            border: 1px solid #ffeaa7 !important; /* Light yellow for Underwriting */
            background: #fffef6 !important; /* Light yellow background */
        }
        
        .applications-list-view.active .mobile-list-item.status-approved {
            border: 1px solid #bee5eb !important; /* Light blue for Approved */
            background: #f6faff !important; /* Light blue background */
        }
        
        .applications-list-view.active .mobile-list-item.status-closed {
            border: 1px solid #f5c6cb !important; /* Light red for Closed */
            background: #fff6f6 !important; /* Light red background */
        }
        
        .applications-list-view.active .mobile-list-item.status-processing {
            border: 1px solid #d6d8db !important; /* Light gray for Processing */
            background: #f8f9fa !important; /* Light gray background */
        }
        
        .applications-list-view.active .mobile-list-item.status-pending {
            border: 1px solid #fad7ac !important; /* Light orange for Pending */
            background: #fffaf6 !important; /* Light orange background */
        }
        
        .applications-list-view.active .mobile-list-item.status-denied,
        .applications-list-view.active .mobile-list-item.status-rejected {
            border: 1px solid #f5c6cb !important; /* Light red for Denied/Rejected */
            background: #fff6f6 !important; /* Light red background */
        }
        
        .applications-list-view.active .mobile-list-item.status-active {
            border: 1px solid #c3e6cb !important; /* Light green for Active */
            background: #f6fff6 !important; /* Light green background */
        }
        
        .applications-list-view.active .mobile-list-item.status-inactive {
            border: 1px solid #d6d8db !important; /* Light gray for Inactive */
            background: #f8f9fa !important; /* Light gray background */
        }
        
        .applications-list-view.active .mobile-list-item.status-loan-selected {
            border: 1px solid #d1b3ff !important; /* Light purple for Loan Selected */
            background: #faf6ff !important; /* Light purple background */
        }
        
        .mobile-list-item .applicant-name {
            font-size: 16px !important;
            font-weight: 600 !important;
            color: #333 !important;
            margin-bottom: 12px !important;
        }
        
        .mobile-list-item .mobile-actions {
            display: flex !important;
            gap: 8px !important;
            flex-wrap: wrap !important;
        }
        
        .mobile-list-item .mobile-actions button {
            flex: 1 !important;
            min-width: 60px !important;
            padding: 8px 12px !important;
            font-size: 11px !important;
            border-radius: 6px !important;
            border: 1px solid !important;
            background: white !important;
            font-weight: 500 !important;
        }
    }
    
    .applications-title h3 {
        color: #333;
        font-weight: 600;
        margin: 0;
    }
    
    /* Fix Status Dropdown and Search Layout */
    .apps-compact-row {
        display: flex;
    align-items: center;
        gap: 15px;
        width: 100%;
    }
    
    .status-dropdown.apps-status {
        flex: 0 0 120px;
        min-width: 120px;
    }
    
    .apps-searchbar {
        flex: 1 1 70%;
        min-width: 0;
    }
    
    .apps-searchbar .form-control {
        width: 100%;
    }
    
    /* Desktop improvements for status dropdown */
    @media (min-width: 768px) {
        .status-dropdown.apps-status {
            flex: 0 0 120px;
            min-width: 120px;
        }
        
        .apps-compact-row {
    gap: 20px;
  }
    }
    

    
    /* Application View Toggle Styles */
    .view-toggle {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    
    /* Pre-qualify button in header */
    .pre-qualify-btn-header {
        padding: 8px 16px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        border-radius: 6px !important;
        background: #0037da !important;
        border: 1px solid #0037da !important;
        color: white !important;
        transition: all 0.3s ease !important;
        white-space: nowrap !important;
    }
    
    .pre-qualify-btn-header:hover {
        background: #0028a8 !important;
        border-color: #0028a8 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(0, 55, 218, 0.3) !important;
    }
    
    .pre-qualify-btn-header:active {
        transform: translateY(0) !important;
    }
    
    .view-toggle-btn {
    background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 8px 12px;
        cursor: pointer;
    transition: all 0.3s ease;
        color: #6c757d;
    }
    
    .view-toggle-btn:hover {
        background: #e9ecef;
        color: #495057;
    }
    
    .view-toggle-btn.active {
        background: #0037da;
        color: white;
        border-color: #0037da;
    }
    
    /* List View Styles */
    .applications-list-view {
        display: none;
    }
    
    .applications-list-view.active {
  display: block;
    }
    
    .applications-grid-view {
        display: block;
    }
    
    .applications-grid-view.hidden {
        display: none;
    }
    
    .list-view-table {
    width: 100%;
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .list-view-table th {
    background: #f8f9fa;
        padding: 12px 16px;
        text-align: left;
    font-weight: 600;
        color: #495057;
        border-bottom: 1px solid #e9ecef;
    }
    
    .list-view-table td {
        padding: 12px 16px;
        border-bottom: 1px solid #f1f3f4;
        vertical-align: middle;
    }
    
    .list-view-table tr:hover {
        background: #f8f9fa;
    }
    
    .list-view-actions {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        align-items: center;
    }
    
    .list-view-actions button {
        padding: 6px 10px;
        font-size: 11px;
        border-radius: 4px;
        border: 1px solid;
        background: white;
        color: #333;
        cursor: pointer;
    transition: all 0.3s ease;
        font-weight: 500;
        min-width: 50px;
        white-space: nowrap;
    }
    
    .list-view-actions button:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    /* Status badge styling for list view */
    .status-badge {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 11px;
    font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .status-badge.status-pre-qualified {
        background: #d4edda;
        color: #155724;
    }
    
    .status-badge.status-processing {
        background: #fff3cd;
        color: #856404;
    }
    
    .status-badge.status-approved {
        background: #d1ecf1;
        color: #0c5460;
    }
    
    .status-badge.status-closed {
        background: #f8d7da;
        color: #721c24;
    }
    
    /* Client Status Badge Styling */
    .client-status {
        display: inline-block !important;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 8px 0;
        text-align: center;
        min-width: 80px;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative;
        z-index: 1;
    }
    
    /* Status-specific badge colors */
    .client-status.status-pre-qualified,
    .client-status.status-pre-qualified {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    
    .client-status.status-underwriting,
    .client-status.status-in-underwriting {
        background: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }
    
    .client-status.status-approved {
        background: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
    }
    
    .client-status.status-closed,
    .client-status.status-loan-closed {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    
    .client-status.status-processing {
        background: #e2e3e5;
        color: #383d41;
        border: 1px solid #d6d8db;
    }
    
    .client-status.status-pending {
        background: #fef5e7;
        color: #856404;
        border: 1px solid #fad7ac;
    }
    
    .client-status.status-denied,
    .client-status.status-rejected {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    
    .client-status.status-active {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    
    .client-status.status-inactive {
        background: #e2e3e5;
        color: #6c757d;
        border: 1px solid #d6d8db;
    }
    
    /* Loan Option Selected badge - Purple theme */
    .client-status.status-loan-selected {
        background: #e8d5ff;
        color: #6f42c1;
        border: 1px solid #d1b3ff;
    }
    
    .client-status.status-not-eligible {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    
    /* Mobile badge improvements */
@media (max-width: 768px) {
    .client-status {
        font-size: 10px !important;
        padding: 4px 8px !important;
        min-width: 70px !important;
        max-width: 120px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure badges are visible on mobile */
    .client-card .client-status,
    .applications-list-view .client-status,
    .application-card .client-status {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Enhanced mobile action buttons */
    .action-buttons {
        gap: 6px;
        margin-top: 12px;
    }
    
    .action-btn {
        padding: 10px 6px;
        min-height: 40px;
        border-radius: 6px;
    }
    
    .action-btn i {
        font-size: 14px;
    }
    
    /* Mobile styling for "See Options" button */
    .action-btn[onclick*="LoadLoanOptions"],
    .action-btn[onclick*="LoadSelectedLoanOption"] {
        flex: 1.2 !important;
        min-width: 100px;
    }
    
    .action-btn[onclick*="LoadLoanOptions"] span,
    .action-btn[onclick*="LoadSelectedLoanOption"] span {
        font-size: 10px;
        margin-left: 2px;
    }
    
    .application-action-btn {
        padding: 10px 6px;
        min-height: 40px;
        border-radius: 6px;
    }
    
    .application-action-btn i {
        font-size: 14px;
    }
    
    /* Mobile styling for "See Options" button in application cards */
    .application-action-btn[onclick*="LoadLoanOptions"],
    .application-action-btn[onclick*="LoadSelectedLoanOption"] {
        flex: 1.2 !important;
        min-width: 100px;
    }
    
    .application-action-btn[onclick*="LoadLoanOptions"] span,
    .application-action-btn[onclick*="LoadSelectedLoanOption"] span {
        font-size: 10px;
        margin-left: 2px;
    }
}

/* Section title styling */
.section-title {
    text-align: center;
    margin-bottom: 20px;
}

.section-title h2 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
    padding: 0;
}

/* Ensure headers have proper styling */
.agent-header,
.header.edit-header {
    text-align: center;
    padding: 20px 0;
}

/* Mobile responsive section titles */
@media (max-width: 768px) {
    .section-title h2 {
        font-size: 20px;
        font-weight: 600;
    }
    
    .agent-header,
    .header.edit-header {
        padding: 15px 0;
    }
}

/* Bottom navigation active state styling (single consolidated definition) */
.bottom-nav .nav-item.active {
    color: #0037da !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    background: rgba(0, 55, 218, 0.08);
}

.bottom-nav .nav-item.active .nav-icon {
    color: #0037da !important;
    transform: scale(1.1);
}

.bottom-nav .nav-item.active div {
    color: #0037da !important;
}
    
    /* Text ellipsis for long names in applications list */
    .client-name,
    .applicant-name,
    .application-name,
    .client-card .client-name,
    .client-card .applicant-name {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }
    
    /* Mobile specific ellipsis for names */
    @media (max-width: 768px) {
        .client-name,
        .applicant-name,
        .application-name,
        .client-card .client-name,
        .client-card .applicant-name {
            max-width: 150px;
        }
    }
    
    /* Grid view specific ellipsis */
    .client-card .client-name,
    .client-card .applicant-name {
        max-width: 180px;
    }
    
    /* List view specific ellipsis */
    .applications-list-view .client-name,
    .applications-list-view .applicant-name {
        max-width: 160px;
    }
    
    /* Edit Application Form - Mobile Single Column Layout */
    @media (max-width: 768px) {
        #edit-tab1 .form-row,
        #edit-tab2 .form-row {
            display: block !important;
            flex-direction: unset !important;
            flex-wrap: unset !important;
        width: 100% !important;
            margin-bottom: 16px !important;
            box-sizing: border-box !important;
    }
    
        #edit-tab1 .form-row .label-col,
        #edit-tab2 .form-row .label-col {
            display: block !important;
            width: 100% !important;
        flex: none !important;
            margin-bottom: 8px !important;
            padding: 0 !important;
            text-align: left !important;
            font-weight: 600 !important;
            color: #333 !important;
            font-size: 14px !important;
            float: none !important;
            clear: both !important;
        }
        
        #edit-tab1 .form-row .input-col,
        #edit-tab2 .form-row .input-col {
            display: block !important;
            width: 100% !important;
            flex: none !important;
            margin: 0 !important;
            padding: 0 !important;
            float: none !important;
            clear: both !important;
        }
        
        #edit-tab1 .form-row .input-col .form-control,
        #edit-tab2 .form-row .input-col .form-control {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            font-size: 16px !important;
            padding: 12px 16px !important;
        border: 1px solid #e9ecef !important;
            border-radius: 8px !important;
            background: #ffffff !important;
            min-height: 44px !important;
            margin: 0 !important;
        }
        
        #edit-tab1 .form-row .input-col select.form-control,
        #edit-tab2 .form-row .input-col select.form-control {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            font-size: 16px !important;
            padding: 12px 16px !important;
            border: 1px solid #e9ecef !important;
            border-radius: 8px !important;
            background: #ffffff !important;
            min-height: 44px !important;
            margin: 0 !important;
        }
    }
    
    /* List view button colors - match grid view */
    .list-view-actions button[onclick*="LoadLoanOptions"],
    .list-view-actions button[onclick*="LoadSelectedLoanOption"] {
        border-color: #0037da;
        color: #0037da;
    }
    
    .list-view-actions button[onclick*="mailto"] {
        border-color: #00ff41;
        color: #00ff41;
    }
    
    .list-view-actions button[onclick*="tel"] {
        border-color: #17a2b8;
        color: #17a2b8;
    }
    
    .list-view-actions button[onclick*="InitiateEditApplication"] {
        border-color: #ffc107;
        color: #856404;
    }
    
    .list-view-actions button[onclick*="SendInviteEmailToUser"] {
        border-color: #6f42c1;
        color: #6f42c1;
    }
    
    /* Profile Form Improvements */
    .admin-card .form-group {
        margin-bottom: 20px;
    }
    
    .admin-card .form-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 8px;
        display: block;
    }
    
    .admin-card .form-control {
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 12px 16px;
        font-size: 14px;
        transition: all 0.3s ease;
    }
    
    .admin-card .form-control:focus {
        border-color: #0037da;
        box-shadow: 0 0 0 0.2rem rgba(0, 55, 218, 0.25);
    }
    
    .admin-card textarea.form-control {
        resize: vertical;
        min-height: 100px;
    }
    
    .admin-card .text-muted {
        font-size: 12px;
        color: #6c757d;
        margin-top: 4px;
    }
    
    /* Mobile Profile Form Layout */
    @media (max-width: 768px) {
        .admin-card .row {
            flex-direction: column;
        }
        
        .admin-card .col-md-6 {
            width: 100%;
            margin-bottom: 20px;
        }
        
        .admin-card .form-group {
            margin-bottom: 16px;
        }
        
        .admin-card .form-control {
            padding: 10px 14px;
            font-size: 16px; /* Prevent zoom on iOS */
        }
    }
    
    /* Fix Mobile Plus Icon Touch Area */
    .mobile-plus-icon {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }
    
    .mobile-plus-icon i {
        font-size: 18px !important;
        pointer-events: none !important;
    }
    
    /* Fix Plus Icon Touch Area for Quick Actions */
    .topbar-btn.add-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        position: relative !important;
        background: #0237da !important;
        color: #ffffff !important;
        border-color: #0237da !important;
    }
    
    .topbar-btn.add-btn i {
        pointer-events: none !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1 !important;
        font-size: 16px !important;
    }
    
    /* Ensure the button area is fully clickable */
    .topbar-btn.add-btn::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 0 !important;
    }
    
    /* Mobile-specific plus icon touch area */
    @media (max-width: 768px) {
        .topbar-btn.add-btn {
            min-width: 48px !important;
            min-height: 48px !important;
            padding: 14px !important;
        border-radius: 8px !important;
        }
        
        .topbar-btn.add-btn i {
            font-size: 18px !important;
        }
        
        /* Ensure touch area is large enough */
        .topbar-btn.add-btn::after {
            content: '' !important;
            position: absolute !important;
            top: -4px !important;
            left: -4px !important;
            right: -4px !important;
            bottom: -4px !important;
            z-index: -1 !important;
        }
    }
    
    /* Selected loan option holder - Bootstrap 5 responsive layout */
    #selected-loan-option-holder {
        /* Bootstrap row class handles the layout */
    }
    
    #selected-loan-option-holder #selectedLoanOption {
        /* Bootstrap col classes handle the width */
    }
    
    #selected-loan-option-holder #applicantDetail {
        /* Bootstrap col classes handle the width */
    }

    /* Mobile Contact Form Layout Improvements */
    @media (max-width: 768px) {
        .contact-form .row {
        flex-direction: column !important;
        }
        
        .contact-form .col-md-6,
        .contact-form .col-sm-6 {
            width: 100% !important;
            margin-bottom: 15px !important;
        }
        
        .contact-form .form-group {
            margin-bottom: 16px !important;
        }
        
        .contact-form .form-control {
            font-size: 16px !important; /* Prevent zoom on iOS */
            padding: 12px 16px !important;
        }
        
        /* Mobile: Bootstrap 5 col-12 classes handle full width on mobile */
        /* No additional CSS needed - Bootstrap handles responsive behavior */
        
        /* Selected Loan Option Contact Details Form - Mobile Improvements */
        #applicantDetail .form-row {
            flex-direction: column !important;
            margin-bottom: 16px !important;
        display: flex !important;
    }
    
        #applicantDetail .label-col {
            width: 100% !important;
            margin-bottom: 8px !important;
        font-weight: 600 !important;
            color: #333 !important;
        font-size: 14px !important;
            flex: none !important;
        }
        
        #applicantDetail .input-col {
            width: 100% !important;
            flex: 1 !important;
        }
        
        #applicantDetail .form-control {
            width: 100% !important;
            font-size: 16px !important; /* Prevent zoom on iOS */
            padding: 12px 16px !important;
            border: 1px solid #e9ecef !important;
        border-radius: 8px !important;
            background: #ffffff !important;
            transition: all 0.3s ease !important;
            min-height: 44px !important;
            touch-action: manipulation !important;
        }
        
        #applicantDetail .form-control:focus {
            border-color: #0037da !important;
            box-shadow: 0 0 0 3px rgba(0, 55, 218, 0.1) !important;
            outline: none !important;
        }
        
        #applicantDetail .main-card {
            background: white !important;
            border-radius: 12px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        border: 1px solid #e9ecef !important;
            margin: 16px 0 !important;
        }
        
        #applicantDetail .card-content {
            padding: 20px !important;
        }
        
        #applicantDetail .card-content h4 {
        font-size: 18px !important;
        font-weight: 600 !important;
            color: #333 !important;
            margin-bottom: 20px !important;
            text-align: center !important;
        }
        
        /* Ensure consistent spacing between form fields */
        #applicantDetail .form-row:last-child {
            margin-bottom: 0 !important;
        }
        
        /* Improve input field appearance */
        #applicantDetail input[type="text"],
        #applicantDetail input[type="tel"],
        #applicantDetail input[type="email"] {
            height: 44px !important;
            line-height: 1.5 !important;
        }
        
        /* Add subtle hover effect */
        #applicantDetail .form-control:hover {
            border-color: #0037da !important;
        }
        
        /* Force single column layout for all form rows in applicant detail */
        #applicantDetail .form-row {
        display: flex !important;
        flex-direction: column !important;
            align-items: stretch !important;
        }
        
        /* Override any existing flex properties */
        #applicantDetail .form-row > * {
            flex: none !important;
            width: 100% !important;
        }
        
        /* Additional enforcement for contact form layout */
        #applicantDetail .form-row .label-col,
        #applicantDetail .form-row .input-col {
            display: block !important;
            width: 100% !important;
            float: none !important;
            clear: both !important;
        }
        
        /* Ensure proper spacing and layout */
        #applicantDetail .form-row .label-col {
            margin-bottom: 8px !important;
            padding-right: 0 !important;
        }
        
        #applicantDetail .form-row .input-col {
            margin-left: 0 !important;
            padding-left: 0 !important;
        }
        
        /* Force single column layout for ALL form rows in applicantDetail */
        #applicantDetail .form-row {
        display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            margin-bottom: 16px !important;
            width: 100% !important;
        }
        
        /* Override any existing flex properties for ALL children */
        #applicantDetail .form-row > * {
            flex: none !important;
            width: 100% !important;
            max-width: 100% !important;
        }
        
        /* Specific targeting for label and input columns */
        #applicantDetail .form-row .label-col {
            display: block !important;
            width: 100% !important;
            flex: none !important;
            margin-bottom: 8px !important;
            padding: 0 !important;
            text-align: left !important;
        }
        
        #applicantDetail .form-row .input-col {
            display: block !important;
            width: 100% !important;
        flex: 1 !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        /* Ensure form controls take full width */
        #applicantDetail .form-row .input-col .form-control {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        
        /* Handle the save button row specifically */
        #applicantDetail .form-row:last-child {
            margin-bottom: 0 !important;
        }
        
        #applicantDetail .form-row:last-child .label-col {
            display: none !important;
        }
        
        #applicantDetail .form-row:last-child .input-col {
            width: 100% !important;
        text-align: center !important;
        }
        
        /* Override any Bootstrap grid classes that might interfere */
        #applicantDetail .col-md-6,
        #applicantDetail .col-sm-6,
        #applicantDetail .col-lg-6 {
            width: 100% !important;
            flex: none !important;
            max-width: 100% !important;
        }
        
        /* Force single column layout - most aggressive approach */
        #applicantDetail .form-row {
            display: block !important;
            width: 100% !important;
            margin-bottom: 16px !important;
        }
        
        #applicantDetail .form-row .label-col,
        #applicantDetail .form-row .input-col {
            display: block !important;
            width: 100% !important;
            float: none !important;
            clear: both !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        #applicantDetail .form-row .label-col {
            margin-bottom: 8px !important;
            font-weight: 600 !important;
            color: #333 !important;
            font-size: 14px !important;
        }
        
        #applicantDetail .form-row .input-col {
            margin-bottom: 0 !important;
        }
        
        /* Ensure the save button is properly centered */
        #applicantDetail .form-row:last-child {
            text-align: center !important;
        }
        
        #applicantDetail .form-row:last-child .input-col {
            text-align: center !important;
        }
        
        #applicantDetail .form-row:last-child .btn {
            margin: 0 auto !important;
        }
        
        /* ULTIMATE FORCE - Override everything for mobile contact form */
        @media (max-width: 768px) {
            #applicantDetail {
                padding: 0 !important;
                margin: 0 !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            
            #applicantDetail .form-row {
                display: block !important;
                flex-direction: unset !important;
                flex-wrap: unset !important;
                width: 100% !important;
                margin: 0 0 16px 0 !important;
                padding: 0 !important;
                box-sizing: border-box !important;
            }
            
            #applicantDetail .form-row .label-col {
                display: block !important;
                width: 100% !important;
                flex: none !important;
                margin-bottom: 8px !important;
                padding: 0 !important;
                text-align: left !important;
        font-weight: 600 !important;
                color: #333 !important;
                font-size: 14px !important;
                float: none !important;
                clear: both !important;
            }
            
            #applicantDetail .form-row .input-col {
                display: block !important;
                width: 100% !important;
                flex: none !important;
                margin: 0 !important;
                padding: 0 !important;
                float: none !important;
                clear: both !important;
            }
            
            #applicantDetail .form-row .input-col .form-control {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                font-size: 16px !important;
                padding: 12px 16px !important;
        border: 1px solid #e9ecef !important;
                border-radius: 8px !important;
                background: #ffffff !important;
                min-height: 44px !important;
                margin: 0 !important;
            }
            
            /* Hide empty label in save button row */
            #applicantDetail .form-row:last-child .label-col {
                display: none !important;
            }
            
            #applicantDetail .form-row:last-child .input-col {
                text-align: center !important;
                width: 100% !important;
                padding: 0 !important;
                margin: 0 !important;
            }
            
            #applicantDetail .form-row:last-child .btn {
                margin: 0 auto !important;
                display: inline-block !important;
            }
        }
        
        /* Mobile features section enhanced grid layout - override all conflicts */
        .features-section,
        .funnel-container .features-section,
        .section .features-section,
        div.features-section {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 16px !important;
            padding: 20px !important;
            margin: 20px 0 !important;
        }
        
        .features-section .feature-item,
        .funnel-container .features-section .feature-item,
        .section .features-section .feature-item,
        div.features-section .feature-item {
        display: flex !important;
        align-items: center !important;
            background: white !important;
            border-radius: 8px !important;
        padding: 12px !important;
            text-align: left !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.06) !important;
        border: 1px solid #e9ecef !important;
        transition: all 0.3s ease !important;
            cursor: pointer !important;
            position: relative !important;
            overflow: hidden !important;
        }
        
        .features-section .feature-item:hover,
        .funnel-container .features-section .feature-item:hover,
        .section .features-section .feature-item:hover,
        div.features-section .feature-item:hover {
            background-color: #f8f9fa !important;
        transform: translateX(4px) !important;
        }
        

        
        .features-section .feature-icon,
        .funnel-container .features-section .feature-icon,
        .section .features-section .feature-icon,
        div.features-section .feature-icon {
        width: 32px !important;
        height: 32px !important;
            background: #0037da !important;
            border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 12px !important;
            color: white !important;
        font-size: 14px !important;
    }
    
        .features-section .feature-item div:last-child,
        .funnel-container .features-section .feature-item div:last-child,
        .section .features-section .feature-item div:last-child,
        div.features-section .feature-item div:last-child {
            font-weight: 500 !important;
            color: #333 !important;
        font-size: 14px !important;
            line-height: 1.2 !important;
            margin: 0 !important;
        }
        
        /* Mobile funnel container enhancements */
        .funnel-container {
            background: white !important;
            border-radius: 16px !important;
            padding: 24px !important;
            margin: 20px 0 !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
            border: 1px solid #e9ecef !important;
        }
        
        /* Maintain desktop funnel stage colors on mobile */
        .funnel-stage {
            background: white !important;
            border-radius: 12px !important;
            padding: 20px !important;
            margin-bottom: 16px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
            border: 1px solid #e9ecef !important;
        }
        
        /* Apply consistent background colors to mobile funnel stages */
        .funnel-stage.stage1 {
            background-color: #fff7e7 !important;
            border-left: 4px solid #ffc107 !important;
        }
        
        .funnel-stage.stage2 {
            background-color: #e8f0fe !important;
            border-left: 4px solid #17a2b8 !important;
        }
        
        .funnel-stage.stage3 {
            background-color: #e8f5e8 !important;
            border-left: 4px solid #00ff41 !important;
        }
        
        .funnel-stage.stage4 {
            background-color: #f8f9fa !important;
            border-left: 4px solid #6f42c1 !important;
        }
        
        .funnel-stage.stage5 {
            background-color: #fff5f5 !important;
            border-left: 4px solid #dc3545 !important;
        }
        
        /* Enhanced mobile touch interactions */
        .feature-item:active {
            transform: scale(0.98) !important;
            transition: transform 0.1s ease !important;
        }
        
        /* Better spacing for mobile */
        .features-section {
            margin: 24px 16px !important;
        }
        
    .funnel-container {
            margin: 24px 16px !important;
        }
        
        /* Ensure proper text contrast */
        .feature-item div:last-child {
            color: #2c3e50 !important;
            font-weight: 700 !important;
        }
    }
    
    /* Tools Section Form Layout Improvements */
    @media (max-width: 768px) {
        .admin-card .row {
        flex-direction: column !important;
        }
        
        .admin-card .col-md-6,
        .admin-card .col-sm-6 {
            width: 100% !important;
            margin-bottom: 20px !important;
        }
        
        .admin-card .form-group {
            margin-bottom: 16px !important;
        }
        
        .admin-card .form-control {
            font-size: 16px !important; /* Prevent zoom on iOS */
            padding: 12px 16px !important;
        }
        
        .admin-card .btn-save {
            width: 100% !important;
            margin-top: 10px !important;
        }
    }
    
    /* Fix Mobile Logout Modal Overlay */
    @media (max-width: 768px) {
        .modal {
            z-index: 9999 !important;
        }
        
        .modal-dialog {
            margin: 10px !important;
            max-width: calc(100vw - 20px) !important;
        }
        
        .modal-content {
            border-radius: 12px !important;
        }
        
        .modal-footer {
            padding: 15px 20px !important;
            gap: 10px !important;
        }
        
        .modal-footer .btn {
            min-height: 44px !important;
        font-size: 16px !important;
            padding: 12px 20px !important;
        }
        
        /* Ensure logout button is clickable */
        .modal-footer .btn-danger,
        .modal-footer .btn-logout {
            background: #dc3545 !important;
            color: white !important;
            border: none !important;
            z-index: 10000 !important;
            position: relative !important;
        }
    }
    
    /* Remove Bootstrap Modal Backdrop - Global Fix */
    .modal-backdrop {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    pointer-events: none !important;
}

    .modal-backdrop.fade {
        display: none !important;
    }
    
    .modal-backdrop.show {
        display: none !important;
    }
    
    /* Ensure modals work without backdrop */
    .modal {
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(2px) !important;
    }
    
    .modal.show {
        display: block !important;
        background: rgba(0, 0, 0, 0.5) !important;
    }
    
    /* Fix Global Confirm Modal z-index for iOS compatibility */
    #globalConfirmModal {
        z-index: 9999 !important;
    }
    
    #globalConfirmModal.show {
        z-index: 9999 !important;
    }
    
    /* Ensure all modals have proper z-index hierarchy */
    .modal {
        z-index: 1050 !important;
    }
    
    .modal.show {
        z-index: 1050 !important;
    }
    
    /* Property details side pane - full height */
    .property-details-overlay {
        z-index: 10000 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.8) !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: flex-end !important;
        padding: 0 !important;
        overflow: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .property-details-panel {
        background: white !important;
        border-radius: 0 !important;
        width: 500px !important;
        height: 100vh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3) !important;
        animation: slideInFromRight 0.3s ease-out !important;
    }
    
    @keyframes slideInFromRight {
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(0);
        }
    }
    
    .property-details-header {
        padding: 20px !important;
        border-bottom: 1px solid #e9ecef !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #f8f9fa !important;
        border-radius: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .property-details-title {
        margin: 0 !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #333 !important;
    }
    
    .property-details-close {
        background: none !important;
        border: none !important;
        font-size: 20px !important;
        color: #666 !important;
        cursor: pointer !important;
        padding: 8px !important;
        border-radius: 50% !important;
        transition: all 0.3s ease !important;
    }
    
    .property-details-close:hover {
        background: #e9ecef !important;
        color: #333 !important;
    }
    
    .property-details-content {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 20px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        scrollbar-color: #c1c1c1 #f1f1f1 !important;
    }
    
    .property-details-content::-webkit-scrollbar {
        width: 6px !important;
    }
    
    .property-details-content::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
    }
    
    .property-details-content::-webkit-scrollbar-thumb {
        background: #c1c1c1 !important;
        border-radius: 3px !important;
    }
    
    .property-details-content::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8 !important;
    }
    
    /* Mobile optimizations for property details */
    @media (max-width: 768px) {
        .property-details-overlay {
            padding: 0 !important;
        }
        
        .property-details-panel {
            width: 100vw !important;
            height: 100vh !important;
            border-radius: 0 !important;
        }
        
        .property-details-header {
            padding: 15px !important;
            border-radius: 0 !important;
        }
        
        .property-details-content {
            padding: 15px !important;
        }
        
        .property-details-title {
            font-size: 16px !important;
        }
    }
    
    /* Flyer editor overlay removed - now using direct navigation */
    /* This prevents CSS conflicts and improves user experience */

    /* Hide bottom nav on desktop globally */
    @media (min-width: 992px) {
        #bottom-nav-container { display: none !important; }
    }

    /* New Application: two-column form layout without changing IDs/HTML */
    .desktop-main-content #new-application-section .card-section {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        row-gap: 14px;
    }
    .desktop-main-content #new-application-section .card-section > .mb-2.row {
        display: block; /* turn each field into a grid item */
    }
    .desktop-main-content #new-application-section .card-section > .mb-2.row .col-sm-12 {
        max-width: 100%;
    }
    /* Make action rows span full width */
    .desktop-main-content #new-application-section .card-section > .d-flex.mt-4,
    .desktop-main-content #new-application-section .card-section > .d-flex.justify-content-between { grid-column: 1 / -1; }

    /* Dashboard layout tweaks removed per request */
    /* Desktop admin: make buttons adaptive (not full-width) */
    .desktop-main-content .btn { width:auto; }
    .admin-container .btn { width:auto; }
    .admin-container .btn-block { width:auto; }

    /* New Application: ensure heading spans full grid width without disturbing columns */
    .desktop-main-content #new-application-section .card-section > h4.mb-2 { grid-column: 1 / -1; display:block; }

    /* Applications: hide Pipeline title on desktop */
    .desktop-main-content #applications-section .title-section h2 { display:none !important; }

    /* Enhanced Admin Navigation - Sticky Top with Better Styling */
    .desktop-content > .admin-nav { 
        position: sticky; 
        top: 0; 
        left: 0; 
        right: 0; 
        z-index: 100; 
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        margin: 0 -24px; 
        padding: 0 24px; 
        border-bottom: 2px solid #e9ecef;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    .desktop-content > .admin-nav .nav-tabs { 
        display: flex; 
        flex-wrap: nowrap; 
        width: 100%; 
        overflow-x: auto;
        gap: 4px;
        padding: 8px 0;
    }
    
    /* Enhanced Tab Styling */
    .desktop-content > .admin-nav .nav-item {
        flex-shrink: 0;
    }
    
    .desktop-content > .admin-nav .nav-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: #6b7280;
        font-weight: 500;
        font-size: 14px;
        transition: background-color 0.2s ease, color 0.2s ease;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        min-width: fit-content;
    }
    
    .desktop-content > .admin-nav .nav-link:hover {
        background: #e3f1ff;
        color: #0137d9 !important;
    }
    
    .desktop-content > .admin-nav .nav-link.active {
        background: #0037da;
        color: white !important;
        box-shadow: 0 2px 4px rgba(0, 55, 218, 0.2);
    }
    
    .desktop-content > .admin-nav .nav-link.active::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 3px;
        background: #ffffff;
        border-radius: 2px;
    }
    
    .desktop-content > .admin-nav .nav-link i {
        font-size: 16px;
    }
    
    /* Hide Logout Button on Desktop */
    .desktop-content > .admin-nav .nav-item:last-child {
        display: none;
    }
    
    /* Smooth Scrolling for Horizontal Overflow */
    .desktop-content > .admin-nav .nav-tabs {
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e0 #f1f5f9;
    }
    
    .desktop-content > .admin-nav .nav-tabs::-webkit-scrollbar {
        height: 4px;
    }
    
    .desktop-content > .admin-nav .nav-tabs::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 2px;
    }
    
    .desktop-content > .admin-nav .nav-tabs::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 2px;
    }
    
    .desktop-content > .admin-nav .nav-tabs::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
    
    /* Responsive improvements for admin-nav */
    @media (max-width: 1200px) {
        .desktop-content > .admin-nav .nav-link {
            padding: 10px 16px;
            font-size: 13px;
        }
        
        .desktop-content > .admin-nav .nav-link i {
            font-size: 15px;
        }
    }
    
    @media (max-width: 992px) {
        .desktop-content > .admin-nav {
            top: 0;
            z-index: 99;
        }
        
        .desktop-content > .admin-nav .nav-link {
            padding: 8px 12px;
            font-size: 12px;
            gap: 6px;
        }
        
        .desktop-content > .admin-nav .nav-link i {
            font-size: 14px;
        }
    }
    
    /* Mobile-specific admin-nav improvements */
    @media (max-width: 768px) {
        .desktop-content > .admin-nav {
            background: #ffffff;
            border-bottom: 1px solid #e5e7eb;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .desktop-content > .admin-nav .nav-tabs {
            padding: 4px 0;
            gap: 2px;
        }
        
        .desktop-content > .admin-nav .nav-link {
            padding: 8px 10px;
            font-size: 11px;
            gap: 4px;
            border-radius: 6px;
        }
        
        .desktop-content > .admin-nav .nav-link i {
            font-size: 13px;
        }
        
        /* Show logout button on mobile */
        .desktop-content > .admin-nav .nav-item:last-child {
            display: block;
        }
    }
    
    /* Tab content - minimal transitions */
    .tab-pane {
        transition: none;
    }
    
    /* ========================================
       ENHANCED APPLICATIONS LIST STYLES
       ======================================== */
    
    /* Ensure applications section stays within admin panel - ONLY when active */
    #applications-section.active {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    #applications-section .container {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    /* Ensure the applications section doesn't break out of admin panel - ONLY when active */
    .desktop-content #applications-section.active,
    .desktop-main-content #applications-section.active {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
    }
    
    /* Enhanced Applications Header - Compact Design */
    #applications-section .applications-header-compact {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        margin-bottom: 24px;
        overflow: hidden;
    }
    
    #applications-section .applications-header-content {
        padding: 20px;
    }
    
    /* Desktop Layout */
    #applications-section .applications-header-desktop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }
    
    #applications-section .applications-header-left {
        display: flex;
        align-items: center;
        gap: 24px;
        flex: 1;
    }
    
    #applications-section .applications-title {
        font-size: 1.5rem !important;
        font-weight: 600 !important;
        color: #1a202c !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
    
    /* Override existing applications-title h3 styles */
    #applications-section .applications-header-compact .applications-title h3 {
        font-size: 1.5rem !important;
        font-weight: 600 !important;
        color: #1a202c !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
    
    #applications-section .applications-search-filter {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        max-width: 600px;
    }
    
    .search-container {
        position: relative;
        flex: 1;
    }
    
    .search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #a0aec0;
        font-size: 14px;
    }
    
    .search-input {
        padding-left: 36px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        height: 40px;
        font-size: 14px;
        transition: border-color 0.2s ease;
    }
    
    .search-input:focus {
        border-color: #0037da;
        box-shadow: 0 0 0 3px rgba(0, 55, 218, 0.1);
    }
    
    .filter-container {
        position: relative;
    }
    
    .filter-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: #f7fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        color: #4a5568;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .filter-btn:hover {
        background: #edf2f7;
        border-color: #cbd5e0;
    }
    
    .filter-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        min-width: 180px;
        z-index: 1000;
        display: none;
        margin-top: 4px;
    }
    
    .filter-container:hover .filter-dropdown {
        display: block;
    }
    
    .filter-item {
        display: block;
        padding: 10px 16px;
        color: #4a5568;
        text-decoration: none;
        font-size: 14px;
        transition: background-color 0.2s ease;
    }
    
    .filter-item:hover {
        background: #f7fafc;
        color: #0037da;
    }
    
    #applications-section .applications-header-right {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .pre-qualify-btn-compact {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 20px !important;
        background: #0037da !important;
        border: none !important;
        border-radius: 8px !important;
        color: white !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        transition: all 0.2s ease !important;
    }
    
    .pre-qualify-btn-compact:hover {
        background: #002ca3 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(0, 55, 218, 0.3) !important;
    }
    
    .view-toggle-compact {
        display: flex;
        background: #f7fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .view-toggle-btn {
        padding: 8px 12px !important;
        background: transparent !important;
        border: none !important;
        color: #a0aec0 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        font-size: 14px !important;
    }
    
    .view-toggle-btn:hover {
        background: #edf2f7 !important;
        color: #4a5568 !important;
    }
    
    .view-toggle-btn.active {
        background: #0037da !important;
        color: white !important;
    }
    
    /* Override existing view-toggle-btn styles for compact header */
    .view-toggle-compact .view-toggle-btn {
        padding: 8px 12px !important;
        background: transparent !important;
        border: none !important;
        color: #a0aec0 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        font-size: 14px !important;
    }
    
    .view-toggle-compact .view-toggle-btn:hover {
        background: #edf2f7 !important;
        color: #4a5568 !important;
    }
    
    .view-toggle-compact .view-toggle-btn.active {
        background: #0037da !important;
        color: white !important;
    }
    
    /* Mobile Layout */
    #applications-section .applications-header-mobile {
        display: none;
    }
    
    #applications-section .mobile-search-filter {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    #applications-section .mobile-search {
        position: relative;
        flex: 1;
    }
    
    #applications-section .mobile-search i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #a0aec0;
        font-size: 14px;
    }
    
    #applications-section .mobile-search input {
        padding-left: 36px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        height: 40px;
        font-size: 14px;
    }
    
    #applications-section .mobile-filter {
        position: relative;
    }
    
    #applications-section .mobile-filter-btn {
        width: 40px;
        height: 40px;
        background: #f7fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        color: #4a5568;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }
    
    #applications-section .mobile-filter-btn:hover {
        background: #edf2f7;
    }
    
    #applications-section .mobile-filter-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        min-width: 160px;
        z-index: 1000;
        display: none;
        margin-top: 4px;
    }
    
    #applications-section .mobile-filter:hover .mobile-filter-dropdown {
        display: block;
    }
    
    /* Responsive Design */
    @media (max-width: 768px) {
        #applications-section .applications-header-desktop {
            display: none;
        }
        
        #applications-section .applications-header-mobile {
            display: block;
        }
        
        #applications-section .applications-header-content {
            padding: 16px;
        }
    }
    
    /* Enhanced Application Cards */
    .applications-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 20px;
        margin-bottom: 24px;
    }
    
    .application-card {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        padding: 20px;
        transition: all 0.2s ease;
        border: 1px solid #f1f5f9;
    }
    
    .application-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }
    
    .application-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
    }
    
    .application-client-info {
        flex: 1;
    }
    
    .application-client-name {
        font-size: 1.1rem;
        font-weight: 600;
        color: #1a202c;
        margin-bottom: 4px;
    }
    
    .application-client-email {
        font-size: 0.9rem;
        color: #718096;
        margin-bottom: 4px;
    }
    
    .application-status {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .application-status.new { background: #e6fffa; color: #065666; }
    .application-status.processing { background: #fef5e7; color: #92400e; }
    .application-status.approved { background: #f0fff4; color: #166534; }
    .application-status.rejected { background: #fef2f2; color: #991b1b; }
    
    .application-details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 16px;
    }
    
    .application-detail-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    .application-detail-label {
        font-size: 0.8rem;
        color: #718096;
        font-weight: 500;
    }
    
    .application-detail-value {
        font-size: 0.9rem;
        color: #1a202c;
        font-weight: 500;
    }
    
    .application-actions {
        display: flex;
        gap: 8px;
    }
    
    .application-action-btn {
        flex: 1;
        padding: 12px 8px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #ffffff;
        color: #4a5568;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }
    
    .application-action-btn:hover {
        background: #f7fafc;
        border-color: #cbd5e0;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* Icon-only styling for application action buttons */
    .application-action-btn i {
        font-size: 16px;
        margin: 0;
    }
    
    /* Hide text in application action buttons, show only icons */
.application-action-btn span {
    display: none;
}

/* Special styling for "See Options" button in application cards - keep text visible */
.application-action-btn[onclick*="LoadLoanOptions"] span,
.application-action-btn[onclick*="LoadSelectedLoanOption"] span {
    display: inline !important;
    margin-left: 4px;
    font-size: 12px;
    font-weight: 500;
}

/* Make "See Options" button wider in application cards */
.application-action-btn[onclick*="LoadLoanOptions"],
.application-action-btn[onclick*="LoadSelectedLoanOption"] {
    flex: 1.5 !important;
    min-width: 120px;
}
    
    .application-action-btn.primary {
        background: #0037da;
        color: white;
        border-color: #0037da;
    }
    
    .application-action-btn.primary:hover {
        background: #002ca3;
    }
    
    /* Enhanced List View */
    .applications-list {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        overflow: hidden;
        margin-bottom: 24px;
    }
    
    .applications-list-header {
        background: #f8fafc;
        padding: 16px 20px;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .applications-list-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #1a202c;
        margin: 0;
    }
    
    .applications-table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .applications-table th {
        background: #f8fafc;
        padding: 12px 16px;
        text-align: left;
        font-size: 0.8rem;
        font-weight: 600;
        color: #4a5568;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .applications-table td {
        padding: 16px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }
    
    .applications-table tr:hover {
        background: #f8fafc;
    }
    
    .applications-table .client-name {
        font-weight: 600;
        color: #1a202c;
    }
    
    .applications-table .client-email {
        color: #718096;
        font-size: 0.9rem;
    }
    
    .applications-table .loan-amount {
        font-weight: 600;
        color: #1a202c;
    }
    
    .applications-table .application-date {
        color: #718096;
        font-size: 0.9rem;
    }
    
    .applications-table .status-badge {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    /* Empty State Styling for Applications */
    #applications-section .applications-empty-state {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 400px;
        padding: 60px 20px;
        width: 100%;
    }
    
    #applications-section .applications-empty-state .empty-state-content {
        text-align: center;
        /*max-width: 450px;*/
        width: 100%;
        min-width: 100%;
    }
    
    #applications-section .applications-empty-state .empty-state-icon {
        margin-bottom: 25px;
    }
    
    #applications-section .applications-empty-state .empty-state-icon i {
        font-size: 4.5rem;
        color: #6c757d;
        opacity: 0.6;
    }
    
    #applications-section .applications-empty-state .empty-state-title {
        font-size: 1.75rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 18px;
        line-height: 1.3;
    }
    
    #applications-section .applications-empty-state .empty-state-description {
        font-size: 1.1rem;
        color: #6c757d;
        margin-bottom: 30px;
        line-height: 1.5;
    }
    
    #applications-section .applications-empty-state .empty-state-btn {
        background: #007bff;
        color: white;
        border: none;
        font-size: 1.1rem;
        padding: 15px 30px;
        font-weight: 600;
        border-radius: 8px;
        box-shadow: 0 3px 6px rgba(0,123,255,0.25);
        transition: all 0.2s ease;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    
    #applications-section .applications-empty-state .empty-state-btn:hover {
        background: #0056b3;
        transform: translateY(-2px);
        box-shadow: 0 5px 12px rgba(0,123,255,0.35);
    }
    
    #applications-section .applications-empty-state .empty-state-btn:active {
        transform: translateY(0);
    }
    
    #applications-section .applications-empty-state .empty-state-btn i {
        font-size: 1rem;
    }
    
    /* Mobile responsive empty state for applications */
    @media (max-width: 767px) {
        #applications-section .applications-empty-state {
            min-height: 350px;
            padding: 40px 15px;
        }
        
        #applications-section .applications-empty-state .empty-state-icon i {
            font-size: 3.5rem;
            margin-bottom: 20px;
        }
        
        #applications-section .applications-empty-state .empty-state-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }
        
        #applications-section .applications-empty-state .empty-state-description {
            font-size: 1rem;
            margin-bottom: 25px;
        }
        
        #applications-section .applications-empty-state .empty-state-btn {
            font-size: 1rem;
            padding: 16px 32px;
            width: 100%;
            max-width: 300px;
        }
    }
    
    /* Ensure mobile styles work even if media queries don't load */
    @media screen and (max-width: 480px) {
        #applications-section .applications-empty-state {
            min-height: 300px !important;
            padding: 30px 10px !important;
        }
        
        #applications-section .applications-empty-state .empty-state-icon i {
            font-size: 3rem !important;
        }
        
        #applications-section .applications-empty-state .empty-state-title {
            font-size: 1.3rem !important;
        }
        
        #applications-section .applications-empty-state .empty-state-description {
            font-size: 0.95rem !important;
        }
        
        #applications-section .applications-empty-state .empty-state-btn {
            padding: 18px 24px !important;
            font-size: 1rem !important;
        }
    }
    
    /* Text truncation fixes for long names */
    .client-name.text-truncate {
        /*max-width: calc(100% - 60px);*/ /* Account for dropdown menu */
        max-width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }
    
    .applicant-name.text-truncate {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }
    
    .list-view-table td strong.text-truncate {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }
    
    /* Ensure proper spacing for client cards */
    .client-card {
        position: relative;
        overflow: hidden;
    }
    
    .client-card .dropdown {
        z-index: 10;
    }
    
    /* Mobile responsive text truncation */
    @media (max-width: 768px) {
        .client-name.text-truncate {
            /*max-width: calc(100% - 50px);*/
            max-width: 50%;
        }
        
        .applicant-name.text-truncate {
            max-width: calc(100% - 20px);
        }
    }

    /* ----------------- QUICK QUOTE CALCULATOR ENHANCEMENTS ----------------- */

    /* Tab Navigation */
    .quick-quote-tabs {
        margin-bottom: 20px;
    }

    .tab-nav {
        display: flex;
        background: #f8f9fa;
        border-radius: 12px;
        padding: 4px;
        gap: 4px;
    }

    .tab-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 16px;
        border: none;
        background: #e9ecef;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        color: #6b7280;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .tab-btn:hover {
        background: #dee2e6;
        color: #374151;
    }

    .tab-btn.active {
        background: #0037da;
        color: white;
        box-shadow: 0 2px 4px rgba(0, 55, 218, 0.2);
    }

    .tab-btn i {
        font-size: 16px;
    }

    .tab-content {
    display: none;
}

.tab-content.active {
    display: block !important;
}

    /* Summary Card */
    .summary-card-container {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin: 20px 0;
        padding: 0;
        overflow: hidden;
    }

    .summary-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #0037da, #002ca3);
    color: white;
}

    .summary-header-actions {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    
    .new-quote-header-btn {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 13px;
    }
    
    .new-quote-header-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
        color: white;
    }

    .summary-title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

    .edit-quote-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border-radius: 6px;
        font-size: 13px;
        transition: all 0.2s ease;
    }

    .edit-quote-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.5);
        color: white;
    }

    .summary-content {
        padding: 20px;
    }

    .summary-grid {
    display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }

    .summary-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .summary-label {
        font-size: 12px;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 500;
    }

    .summary-value {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
    }

    /* Mobile Responsive for Summary Card */
    @media (max-width: 768px) {
        .summary-card-container {
            margin-bottom: 16px;
            border-radius: 8px;
        }
        
        /* Add bottom padding to prevent calculate button overlap */
        .quick-quote-tabs {
            margin-bottom: 16px;
        }
        
        /* Ensure bottom navigation doesn't overlap */
        .container-card {
            padding-bottom: 120px;
        }
        
        /* Add bottom spacing to all content containers */
        .quick-quote-tabs {
            padding-bottom: 20px;
        }
        
        .tab-content {
            padding-bottom: 100px;
        }
        
        /* Ensure summary section has bottom spacing */
        #summary-section {
            padding-bottom: 100px;
        }
        
        /* Ensure recent quotes container has bottom spacing */
        .recent-quotes-container {
            padding-bottom: 100px;
        }
        
        /* Ensure loan options container has bottom spacing */
        #loan-option-holder-cq {
            padding-bottom: 100px;
        }
        
        /* Recent quote summary grid mobile optimization */
        .recent-quote-summary {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        
        .recent-quote-summary .summary-item {
            gap: 2px;
        }
        
        .recent-quote-summary .summary-label {
            font-size: 10px;
        }
        
        .recent-quote-summary .summary-value {
            font-size: 12px;
        }
        
        .summary-card-header {
            padding: 12px 16px;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }
        
        .summary-title {
            font-size: 16px;
        }
        
        .edit-quote-btn {
            align-self: flex-end;
            padding: 6px 10px;
            font-size: 12px;
        }
        
        .summary-content {
            padding: 16px;
        }
        
        .summary-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .summary-item {
            gap: 2px;
        }
        
        .summary-label {
            font-size: 11px;
        }
        
        .summary-value {
            font-size: 14px;
        }
    }

    /* 576px media query moved to organized section at end of file */

    /* Force mobile summary card styles with maximum specificity */
    @media (max-width: 768px) {
        body .summary-card-container {
            background: white !important;
            border-radius: 8px !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
            margin-bottom: 16px !important;
            overflow: hidden !important;
        }
        
        body .summary-card-header {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            padding: 12px 16px !important;
            background: linear-gradient(135deg, #0037da, #002ca3) !important;
            color: white !important;
        }
        
        body .summary-title {
            margin: 0 !important;
            font-size: 16px !important;
            font-weight: 600 !important;
        }
        
        body .edit-quote-btn {
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            padding: 6px 10px !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            background: rgba(255, 255, 255, 0.1) !important;
            color: white !important;
            border-radius: 6px !important;
            font-size: 12px !important;
            transition: all 0.2s ease !important;
        }
        
        body .summary-content {
            padding: 16px !important;
        }
        
        body .summary-grid {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 12px !important;
        }
        
        body .summary-item {
            display: flex !important;
            flex-direction: column !important;
            gap: 2px !important;
        }
        
        body .summary-label {
            font-size: 11px !important;
            color: #6b7280 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            font-weight: 500 !important;
        }
        
        body .summary-value {
            font-size: 14px !important;
            font-weight: 600 !important;
            color: #111827 !important;
        }
    }

    @media (max-width: 576px) {
        body .summary-card-header {
            padding: 10px 12px !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 12px !important;
        }
        
        body .summary-title {
            font-size: 14px !important;
        }
        
        body .edit-quote-btn {
            align-self: flex-end !important;
            padding: 4px 8px !important;
            font-size: 11px !important;
        }
        
        body .summary-content {
            padding: 12px !important;
        }
        
        body .summary-grid {
            grid-template-columns: 1fr !important;
            gap: 8px !important;
        }
        
        body .summary-label {
            font-size: 10px !important;
        }
        
        body .summary-value {
            font-size: 13px !important;
        }
    }

    /* Recent Quotes */
    .recent-quotes-container {
        min-height: 300px;
        padding: 20px 0;
    }

    .recent-quote-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 16px;
        overflow: hidden;
        transition: all 0.2s ease;
    }
    
    /* Ensure last recent quote card has extra bottom margin */
    .recent-quote-card:last-child {
        margin-bottom: 20px;
    }

    .recent-quote-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }

    .recent-quote-header {
        display: flex;
        justify-content: space-between;
    align-items: center;
        padding: 16px 20px;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
    }

    .recent-quote-title {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }

    .recent-quote-date {
        font-size: 12px;
        color: #6b7280;
    }

    .recent-quote-content {
        padding: 16px 20px;
    }

    .recent-quote-summary {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 12px;
        margin-bottom: 16px;
    }

    /* Ensure grid works properly */
    .recent-quote-summary .summary-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .recent-quote-summary .summary-label {
        font-size: 12px;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .recent-quote-summary .summary-value {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .recent-quote-actions {
        display: flex;
        gap: 8px;
    }

    .recent-quote-actions .btn {
        flex: 1;
        min-width: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 16px;
        font-size: 13px;
        border-radius: 6px;
    }
    
    /* Summary actions */
    .summary-actions {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #e5e7eb;
    }
    
    .new-quote-btn {
        width: 100%;
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 600;
        border-radius: 8px;
        background: linear-gradient(135deg, #0037da, #002ca3);
        border: none;
        color: white;
        transition: all 0.2s ease;
    }
    
    .new-quote-btn:hover {
        background: linear-gradient(135deg, #002ca3, #002080);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 55, 218, 0.3);
    }
    
    /* Recent quote details accordion */
    .recent-quote-details {
        border-top: 1px solid #e5e7eb;
        background: #f9fafb;
        padding: 16px;
        margin-top: 12px;
    }
    
    .quote-details-content {
        animation: slideDown 0.3s ease;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .quote-details-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }
    
    .detail-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    .detail-label {
        font-size: 11px;
        color: #6b7280;
        text-transform: uppercase;
        font-weight: 500;
    }
    
    .detail-value {
        font-size: 13px;
        color: #1f2937;
        font-weight: 500;
    }
    
    .quote-results-preview {
        background: white;
        border-radius: 8px;
        padding: 12px;
        border: 1px solid #e5e7eb;
    }
    
    .quote-results-preview h6 {
        margin: 0 0 8px 0;
        font-size: 14px;
        color: #1f2937;
    }
    
    .loan-options-preview {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
    }
    
    .loan-option-preview {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 10px;
        transition: all 0.2s ease;
    }
    
    .loan-option-preview:hover {
        border-color: #0037da;
        box-shadow: 0 2px 4px rgba(0, 55, 218, 0.1);
    }
    
    .option-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }
    
    .option-name {
        font-size: 13px;
        font-weight: 600;
        color: #1f2937;
    }
    
    .option-rate {
        font-size: 14px;
        font-weight: 700;
        color: #0037da;
    }
    
    .option-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 11px;
        color: #6b7280;
    }
    
    .monthly-payment {
        font-weight: 500;
    }
    
    .closing-costs {
        font-weight: 500;
    }
    
    /* Loan Options Full Display */
    .loan-options-full {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .toggle-loan-options-btn {
        margin-top: 12px;
        width: 100%;
        padding: 8px 12px;
        font-size: 13px;
        border-radius: 6px;
        transition: all 0.2s ease;
    }
    
    .toggle-loan-options-btn.active {
        background: #0037da;
        color: white;
        border-color: #0037da;
    }
    
    .toggle-loan-options-btn:hover {
        background: #002ca3;
        color: white;
        border-color: #002ca3;
    }
    
    /* Loan Cards in Recent Quotes */
    .loan-options-full .loan-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        transition: all 0.2s ease;
    }
    
    .loan-options-full .loan-card:hover {
        border-color: #0037da;
        box-shadow: 0 2px 8px rgba(0, 55, 218, 0.1);
    }
    
    .loan-options-full .loan-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }
    
    .loan-options-full .loan-header-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    
    .loan-options-full .loan-header-left {
        display: flex;
        align-items: center;
    }
    
    .loan-options-full .loan-header-right {
        display: flex;
        align-items: center;
    }
    
    .loan-options-full .loan-type-badge {
        background: linear-gradient(135deg, #0037da, #002ca3);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
    }
    
    .loan-options-full .loan-details {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 12px;
    }
    
    .loan-options-full .detail-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .loan-options-full .detail-heading {
        font-size: 11px;
        color: #6b7280;
        font-weight: 500;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .loan-options-full .detail-value {
        font-size: 16px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 2px;
    }
    
    .loan-options-full .detail-subtext {
        font-size: 11px;
        color: #6b7280;
        font-weight: 400;
    }
    
    .loan-options-full .savings-row {
        background: linear-gradient(135deg, #0037da, #002ca3);
        color: white;
        padding: 12px 16px;
        border-radius: 6px;
        margin-bottom: 12px;
    }
    
    .loan-options-full .savings-detail {
        display: flex;
        gap: 16px;
        justify-content: space-between;
    }
    
    .loan-options-full .savings-label {
        font-size: 11px;
        font-weight: 500;
        opacity: 0.9;
        margin-bottom: 4px;
    }
    
    .loan-options-full .savings-value {
        font-size: 16px;
        font-weight: 700;
    }
    
    .loan-options-full .expanded-details {
        background: #f8f9fa;
        padding: 16px;
        border-radius: 6px;
        margin-top: 12px;
        display: none;
    }
    
    .loan-options-full .expanded-details.show {
  display: block;
    }
    
    .loan-options-full .detail-section {
        margin-bottom: 20px;
    }
    
    .loan-options-full .detail-section-title {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 12px;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 8px;
    }
    
    .loan-options-full .detail-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f3f4f6;
    }
    
    .loan-options-full .detail-row .detail-label {
        font-size: 12px;
        color: #6b7280;
        font-weight: 500;
    }
    
    .loan-options-full .detail-row .detail-amount {
        font-size: 12px;
        font-weight: 600;
        color: #111827;
    }
    
    .loan-options-full .view-details {
        background: #0037da;
        color: white;
        padding: 12px 16px;
        border-radius: 6px;
        text-align: center;
        font-weight: 600;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
    }
    
    .loan-options-full .view-details:hover {
        background: #002ca3;
    }
    
    .loan-options-full .loan-actions {
        display: flex;
        justify-content: center;
    }
    
    /* Expanded Details */
    .loan-details-expanded {
        background: #f8f9fa;
        padding: 16px;
        margin-top: 12px;
        border-radius: 8px;
        border: 1px solid #e9ecef;
    }
    
    .expanded-details-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .detail-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .detail-row .detail-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .detail-row .detail-label {
        font-size: 12px;
        color: #6b7280;
        font-weight: 500;
    }
    
    .detail-row .detail-value {
        font-size: 13px;
        color: #1f2937;
        font-weight: 600;
    }

    .no-recent-quotes {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 300px;
    }

    .empty-state {
        text-align: center;
        color: #6b7280;
    }

    .empty-state i {
        /*font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;*/
    }

    .empty-state h5 {
        margin-bottom: 8px;
        color: #374151;
    }

    .empty-state p {
        margin-bottom: 20px;
        font-size: 14px;
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
        .tab-btn {
            padding: 10px 12px;
            font-size: 13px;
        }
        
        .tab-btn span {
            display: none;
        }
        
        .tab-btn i {
            font-size: 18px;
        }
        
        .summary-grid {
            grid-template-columns: 1fr;
            gap: 12px;
        }
        
        .recent-quote-summary {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .recent-quote-actions {
            flex-direction: column;
            gap: 8px;
        }
        
        .recent-quote-actions .btn {
            min-width: auto;
            width: 100%;
        }
        
        .quote-details-grid {
            grid-template-columns: 1fr;
            gap: 8px;
        }
        
        .summary-actions {
            margin-top: 12px;
            padding-top: 12px;
        }
        
        .summary-header-actions {
            flex-direction: column;
            gap: 6px;
        }
        
        .new-quote-header-btn {
            font-size: 12px;
            padding: 6px 10px;
        }
        
        .loan-options-preview {
            gap: 6px;
        }
        
        .loan-option-preview {
            padding: 8px;
        }
        
        .option-header {
            margin-bottom: 4px;
        }
        
        .option-name {
            font-size: 12px;
        }
        
        .option-rate {
            font-size: 13px;
        }
        
        .option-details {
            font-size: 10px;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
        }
        
        /* Mobile styles for loan options full display */
        .loan-options-full .loan-details {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        
        .loan-options-full .loan-card {
            padding: 12px;
        }
        
        .loan-options-full .loan-header {
            margin-bottom: 8px;
        }
        
        .loan-options-full .detail-label {
            font-size: 10px;
        }
        
        .loan-options-full .detail-value {
            font-size: 12px;
        }
        
        .detail-row {
            grid-template-columns: 1fr;
            gap: 8px;
        }
        
        .detail-row .detail-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
        }
        
        .detail-row .detail-label {
            font-size: 11px;
        }
        
        .detail-row .detail-value {
            font-size: 12px;
        }
        
        .summary-card-header {
            padding: 12px 16px;
        }
        
        .summary-content {
            padding: 16px;
        }
    }

    @media (max-width: 576px) {
        .recent-quote-summary {
            grid-template-columns: 1fr;
        }
        
        .recent-quote-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }
    }

    /* Enhanced Loan Cards */
    .loan-card {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin: 16px 0;
        overflow: hidden;
        transition: all 0.3s ease;
        border: 1px solid #e9ecef;
    }

    .loan-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    .loan-header {
        padding: 20px;
        position: relative;
        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
        border-bottom: 1px solid #e9ecef;
    }

    .loan-type-badge {
    background: linear-gradient(135deg, #0037da, #002ca3);
    color: white;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    position: absolute;
    top: 16px;
    right: 16px;
    box-shadow: 0 2px 4px rgba(0, 55, 218, 0.2);
}

    .loan-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    padding: 20px;
    border-top: 1px solid #f0f0f0;
}

/* Desktop: Make loan details in one row for compact design */
@media (min-width: 769px) {
    .loan-details {
        grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* Enhanced loan header with purchase info */
.loan-header {
    padding: 20px;
    position: relative;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-bottom: 1px solid #e9ecef;
}

.loan-header-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.loan-header-left {
    flex: 1;
}

.loan-header-right {
    text-align: right;
}

.loan-purchase-info {
    display: flex;
    gap: 20px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.purchase-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.purchase-info-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.purchase-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

/* Hide purchase info on desktop */
@media (min-width: 769px) {
    .loan-purchase-info {
        display: none;
    }
}

    .detail-column {
        text-align: center;
    }

    .detail-heading {
        color: #6b7280;
        font-size: 13px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }

    .detail-value {
        font-weight: 700;
        font-size: 20px;
        color: #111827;
        margin-bottom: 4px;
    }

    .detail-subtext {
        color: #6b7280;
        font-size: 12px;
        font-weight: 500;
    }

    .savings-row {
    background: linear-gradient(135deg, #0037da, #002ca3);
    padding: 16px 20px;
    color: white;
}

    .savings-detail {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 16px;
        align-items: center;
    }

    .savings-value {
        font-size: 18px;
        font-weight: 700;
        color: white;
    }

    .expanded-details {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background: #f8f9fa;
    }

    .expanded-details.show {
        max-height: max-content;
    }

    .detail-section {
        padding: 16px 20px;
        border-bottom: 1px solid #e9ecef;
    }

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

    .detail-section-title {
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .detail-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
    }

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

    .detail-label {
        font-size: 13px;
        color: #6b7280;
        font-weight: 500;
    }

    .detail-amount {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
    }

    .view-details {
    background: #f8f9fa;
    color: #0037da;
    text-align: center;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-top: 1px solid #e9ecef;
}

.view-details:hover {
    background: #e9ecef;
    color: #002ca3;
}

    /* Mobile Responsive for Loan Cards */
@media (max-width: 768px) {
    .loan-details {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 16px;
    }
    
    .savings-detail {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .detail-value {
        font-size: 18px;
    }
    
    .loan-header {
        padding: 16px;
    }
    
    .loan-header-info {
        flex-direction: column;
        gap: 12px;
    }
    
    .loan-header-right {
        text-align: left;
    }
    
    .loan-purchase-info {
        gap: 12px;
    }
    
    .loan-type-badge {
        top: 12px;
        right: 12px;
        font-size: 11px;
        padding: 4px 8px;
    }
}

    @media (max-width: 576px) {
    .loan-card {
        margin: 12px 0;
        border-radius: 8px;
    }
    
    .loan-details {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .detail-section {
        padding: 12px 16px;
    }
    
    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .detail-amount {
        align-self: flex-end;
    }
    
    .loan-purchase-info {
        flex-direction: column;
        gap: 8px;
    }
}

/* Mobile-specific tab styles to match the design */
@media (max-width: 768px) {
    .quick-quote-tabs {
        margin-bottom: 16px;
    }
    
    .tab-nav {
        background: #0037da !important;
        border-radius: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        margin: 0 -16px 20px -16px !important;
        display: flex !important;
        width: calc(100% + 32px) !important;
    }
    
    .tab-btn {
        flex: 1 !important;
        padding: 16px 12px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.8) !important;
        border: none !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        transition: all 0.2s ease !important;
        box-shadow: none !important;
    }
    
    .tab-btn:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
    }
    
    .tab-btn.active {
        background: rgba(255, 255, 255, 0.9) !important;
        color: #0037da !important;
        box-shadow: none !important;
    }
    
    .tab-btn i {
        font-size: 14px;
        margin-right: 4px;
    }
    
    .tab-btn span {
        display: inline;
    }
    
    /* Ensure tab content is properly displayed on mobile */
    .tab-content.active {
        display: block !important;
        margin-top: 16px;
    }
    
    /* Mobile recent quote cards styling */
    .recent-quote-card {
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        margin-bottom: 16px !important;
        overflow: hidden !important;
        border: 1px solid #e5e7eb !important;
    }
    
    .recent-quote-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 16px 20px !important;
        background: #f8f9fa !important;
        border-bottom: 1px solid #e9ecef !important;
    }
    
    .recent-quote-title {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }
    
    .recent-quote-date {
        font-size: 12px;
        color: #6b7280;
    }
    
    .recent-quote-content {
        padding: 16px 20px;
    }
    
    .recent-quote-summary {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }
    
    .recent-quote-actions {
        display: flex !important;
        gap: 8px !important;
    }
    
    .recent-quote-actions .btn {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        background: #0037da !important;
        color: white !important;
        border: none !important;
        transition: all 0.2s ease !important;
    }
    
    .recent-quote-actions .btn:hover {
        background: #002ca3;
        transform: translateY(-1px);
    }
}

/* 375px media query moved to organized section at end of file */

/* Force mobile tab styles with maximum specificity */
@media (max-width: 768px) {
    body .quick-quote-tabs .tab-nav {
        background: #0037da !important;
        border-radius: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        margin: 0 -16px 20px -16px !important;
        display: flex !important;
        width: calc(100% + 32px) !important;
    }
    
    body .quick-quote-tabs .tab-btn {
        flex: 1 !important;
        padding: 16px 12px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.8) !important;
        border: none !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        transition: all 0.2s ease !important;
        box-shadow: none !important;
    }
    
    body .quick-quote-tabs .tab-btn:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
    }
    
    body .quick-quote-tabs .tab-btn.active {
        background: rgba(255, 255, 255, 0.9) !important;
        color: #0037da !important;
        box-shadow: none !important;
    }
    
    body .quick-quote-tabs .tab-btn i {
        font-size: 14px !important;
        margin-right: 4px !important;
    }
    
    body .quick-quote-tabs .tab-btn span {
        display: inline !important;
    }
    
    /* Force recent quote card styles */
    body .recent-quote-card {
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        margin-bottom: 16px !important;
        overflow: hidden !important;
        border: 1px solid #e5e7eb !important;
    }
    
    body .recent-quote-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 16px 20px !important;
        background: #f8f9fa !important;
        border-bottom: 1px solid #e9ecef !important;
    }
    
    body .recent-quote-actions {
        display: flex !important;
        gap: 8px !important;
    }
    
    body .recent-quote-actions .btn {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        background: #0037da !important;
        color: white !important;
        border: none !important;
        transition: all 0.2s ease !important;
    }
    
    /* Force recent quote card styles with maximum specificity */
    body #recent-quotes-list .recent-quote-card {
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        margin-bottom: 16px !important;
        overflow: hidden !important;
        border: 1px solid #e5e7eb !important;
    }
    
    body #recent-quotes-list .recent-quote-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 16px 20px !important;
        background: #f8f9fa !important;
        border-bottom: 1px solid #e9ecef !important;
    }
    
    body #recent-quotes-list .recent-quote-title {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #111827 !important;
        margin: 0 !important;
    }
    
    body #recent-quotes-list .recent-quote-date {
        font-size: 12px !important;
        color: #6b7280 !important;
    }
    
    body #recent-quotes-list .recent-quote-content {
        padding: 16px 20px !important;
    }
    
    body #recent-quotes-list .recent-quote-summary {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }
    
    body #recent-quotes-list .recent-quote-actions {
        display: flex !important;
        gap: 8px !important;
    }
    
    body #recent-quotes-list .recent-quote-actions .btn {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        border: none !important;
        transition: all 0.2s ease !important;
    }
    
    body #recent-quotes-list .recent-quote-actions .btn-primary {
        background: #0037da !important;
        color: white !important;
    }
    
    body #recent-quotes-list .recent-quote-actions .btn-outline-primary {
        background: white !important;
        color: #0037da !important;
        border: 1px solid #0037da !important;
    }
    
    body #recent-quotes-list .summary-item {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    
    body #recent-quotes-list .summary-label {
        font-size: 12px !important;
        color: #6b7280 !important;
        font-weight: 500 !important;
    }
    
    body #recent-quotes-list .summary-value {
        font-size: 14px !important;
        color: #111827 !important;
        font-weight: 600 !important;
    }
}
}


/* ========================================
   MEDIA QUERIES - ORGANIZED BY BREAKPOINT
   ======================================== */

/* ========================================
   MIN-WIDTH MEDIA QUERIES (Desktop-First)
   ======================================== */

/* Large Desktops: 1200px and up */
@media (min-width: 1200px) {
    /* Desktop-specific large screen styles will be organized here */
}

/* Desktops: 992px and up */  
@media (min-width: 992px) {
    /* DESKTOP DASHBOARD LAYOUT - MOVED FROM SCATTERED LOCATIONS */
    
    /* Main wrapper for desktop layout */
    .desktop-dashboard-wrapper {
        display: flex;
        height: 100vh;
        overflow: hidden;
        background-color: #f8f9fa;
    }
    
    /* Left sidebar navigation */
    .desktop-sidebar {
        width: 240px;
        background-color: #ffffff;
        box-shadow: 2px 0 5px rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        transition: all 0.3s ease;
        position: relative;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e0 #f7fafc;
    }
    
    /* Note: This section will contain the full desktop layout CSS 
       that was scattered throughout the file. Due to size constraints,
       the full content needs to be moved manually or with additional tooling. */
}

/* Tablets Landscape: 768px and up */
@media (min-width: 768px) {
    /* Tablet landscape styles will be organized here */  
}

/* ========================================
   MAX-WIDTH MEDIA QUERIES (Mobile-First Overrides)
   ======================================== */

/* Large Tablets and Small Desktops: up to 1200px */
@media (max-width: 1200px) {
    /* Responsive tweaks for smaller desktops */
}

/* Standard Desktops: up to 992px */
@media (max-width: 992px) {
    /* Desktop responsive overrides */
}

/* Tablets Portrait: up to 768px */
@media (max-width: 768px) {
    /* Tablet portrait and mobile styles */
}

/* Large Mobile: up to 576px */
@media (max-width: 576px) {
    /* SUMMARY CARD MOBILE STYLES - CONSOLIDATED */
    .summary-card-container {
        margin-bottom: 12px;
    }
    
    .summary-card-header {
        padding: 10px 12px;
    }
    
    .summary-title {
        font-size: 14px;
    }
    
    .edit-quote-btn {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    .summary-content {
        padding: 12px;
    }
    
    .summary-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .summary-label {
        font-size: 10px;
    }
    
    .summary-value {
        font-size: 13px;
    }
    
    /* Ensure bottom navigation doesn't overlap on small mobile */
    .container-card {
        padding-bottom: 140px;
    }
    
    /* Add bottom spacing to all content containers on small mobile */
    .tab-content {
        padding-bottom: 120px;
    }
    
    /* Ensure summary section has bottom spacing */
    #summary-section {
        padding-bottom: 120px;
    }
    
    /* Ensure recent quotes container has bottom spacing */
    .recent-quotes-container {
        padding-bottom: 120px;
    }
    
    /* Ensure loan options container has bottom spacing */
    #loan-option-holder-cq {
        padding-bottom: 120px;
    }
    
    /* Additional 576px mobile styles will be consolidated here */
}

/* Standard Mobile: up to 480px */
@media (max-width: 480px) {
    /* Standard mobile device styles */
}

/* Small Mobile: up to 375px */
@media (max-width: 375px) {
    /* EXTRA SMALL MOBILE DEVICES (iPhone SE, etc.) - CONSOLIDATED */
    .tab-btn {
        padding: 14px 8px !important;
        font-size: 12px !important;
    }
    
    .tab-btn i {
        font-size: 12px;
        margin-right: 2px;
    }
    
    .recent-quote-header {
        padding: 12px 16px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .recent-quote-content {
        padding: 12px 16px;
    }
    
    .recent-quote-summary {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .recent-quote-actions {
        flex-direction: column !important;
    }
    
    .recent-quote-actions .btn {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
}

/* ========================================
   END OF ORGANIZED MEDIA QUERIES
   ======================================== */