/* /Components/AddressChangeModal.razor.rz.scp.css */
.modal-overlay[b-1evor5pabm] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.modal-card[b-1evor5pabm] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal-header[b-1evor5pabm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 0;
}

.modal-header h3[b-1evor5pabm] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary, #1a1a2e);
}

.modal-close[b-1evor5pabm] {
    background: none;
    border: none;
    color: var(--text-secondary, #666);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    font-size: 1.4rem;
    line-height: 1;
}

.modal-close:hover[b-1evor5pabm] {
    background: var(--bg-secondary, #f5f5f5);
}

.modal-body[b-1evor5pabm] {
    padding: 20px;
}

.current-address[b-1evor5pabm] {
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.address-label[b-1evor5pabm] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
    margin-bottom: 4px;
}

.address-text[b-1evor5pabm] {
    display: block;
    font-size: 0.95rem;
    color: var(--text-primary, #1a1a2e);
}

.address-postal[b-1evor5pabm] {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    margin-top: 2px;
}

.search-section[b-1evor5pabm] {
    margin-bottom: 16px;
}

.search-label[b-1evor5pabm] {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    margin-bottom: 6px;
}

.search-wrapper[b-1evor5pabm] {
    position: relative;
}

.search-input[b-1evor5pabm] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border, #e8e8e8);
    border-radius: 8px;
    font-size: 0.95rem;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.search-input:focus[b-1evor5pabm] {
    outline: none;
    border-color: var(--brand-primary, #1a7a4a);
}

.suggestions-dropdown[b-1evor5pabm] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border, #e8e8e8);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    max-height: 240px;
    overflow-y: auto;
}

.suggestion-item[b-1evor5pabm] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 1px solid var(--border, #e8e8e8);
    transition: background 0.1s;
}

.suggestion-item:last-child[b-1evor5pabm] {
    border-bottom: none;
}

.suggestion-item:hover[b-1evor5pabm] {
    background: var(--bg-secondary, #f5f5f5);
}

.suggestion-line[b-1evor5pabm] {
    display: block;
    font-size: 0.9rem;
    color: var(--text-primary, #1a1a2e);
}

.suggestion-postal[b-1evor5pabm] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
    margin-top: 2px;
}

.selected-address[b-1evor5pabm] {
    margin-bottom: 16px;
}

.selected-display[b-1evor5pabm] {
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.selected-display strong[b-1evor5pabm] {
    display: block;
    font-size: 0.95rem;
    color: var(--text-primary, #1a1a2e);
}

.selected-display span[b-1evor5pabm] {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    margin-top: 2px;
}

.serviceability[b-1evor5pabm] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.serviceability.serviceable[b-1evor5pabm] {
    background: #e8f5e9;
    color: #2e7d32;
}

.serviceability.not-serviceable[b-1evor5pabm] {
    background: #fff3e0;
    color: #e65100;
}

.error-message[b-1evor5pabm] {
    color: #c0392b;
    font-size: 0.85rem;
    padding: 8px 12px;
    background: #fdf0ef;
    border-radius: 6px;
    margin-bottom: 12px;
}

.success-message[b-1evor5pabm] {
    text-align: center;
    padding: 24px 16px;
    color: var(--brand-primary, #1a7a4a);
}

.success-message p[b-1evor5pabm] {
    margin-top: 12px;
    font-size: 1rem;
    color: var(--text-primary, #1a1a2e);
}

.modal-actions[b-1evor5pabm] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.btn-primary[b-1evor5pabm] {
    background: var(--brand-primary, #1a7a4a);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-primary:hover:not(:disabled)[b-1evor5pabm] {
    background: var(--brand-primary-dark, #155e38);
}

.btn-primary:disabled[b-1evor5pabm] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-cancel[b-1evor5pabm] {
    background: none;
    border: 1px solid var(--border, #e8e8e8);
    color: var(--text-secondary, #666);
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 0.95rem;
    cursor: pointer;
}

.btn-cancel:hover[b-1evor5pabm] {
    background: var(--bg-secondary, #f5f5f5);
}
/* /Layout/MainLayout.razor.rz.scp.css */
.portal-layout[b-l5hxfdfv3z] {
    display: flex;
    min-height: 100vh;
    background: var(--bg-page);
}

.portal-main[b-l5hxfdfv3z] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.portal-header[b-l5hxfdfv3z] {
    display: none;
    background: var(--brand-primary);
    color: white;
    padding: 12px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.header-logo[b-l5hxfdfv3z] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: 700;
}

.header-leaf[b-l5hxfdfv3z] {
    width: 28px;
    height: auto;
}

[b-l5hxfdfv3z] .header-hamburger {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.15s;
}

[b-l5hxfdfv3z] .header-hamburger:hover {
    background: rgba(255, 255, 255, 0.15);
}

[b-l5hxfdfv3z] .header-bell {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 50%;
    transition: background 0.15s;
}

[b-l5hxfdfv3z] .header-bell:hover {
    background: rgba(255, 255, 255, 0.15);
}

.portal-content[b-l5hxfdfv3z] {
    flex: 1;
    padding: 24px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.portal-auth-page[b-l5hxfdfv3z] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--brand-login-bg);
    padding: 16px;
    flex: 1;
}

/* Mobile: show header and bottom nav, hide sidebar */
@media (max-width: 767px) {
    .portal-header[b-l5hxfdfv3z] {
        display: flex;
    }

    .portal-content[b-l5hxfdfv3z] {
        padding: 16px;
        padding-bottom: 80px; /* space for bottom nav */
    }
}
/* /Pages/Bills.razor.rz.scp.css */
.bills-page[b-p1yjd4rqgx] {
    padding-bottom: 80px;
}

.page-title[b-p1yjd4rqgx] {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--brand-primary-dark);
}

.balance-card[b-p1yjd4rqgx] {
    background: var(--brand-gradient);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    margin-bottom: 16px;
    box-shadow: var(--shadow-lg, 0 4px 16px rgba(0,0,0,0.12));
    color: white;
}

.balance-label[b-p1yjd4rqgx] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 4px;
}

.balance-amount[b-p1yjd4rqgx] {
    font-size: 2rem;
    font-weight: 700;
    color: white;
}

.balance-amount.negative[b-p1yjd4rqgx] {
    color: #FFCDD2;
}

.balance-status[b-p1yjd4rqgx] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.85rem;
}

.status-badge[b-p1yjd4rqgx] {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge.active[b-p1yjd4rqgx] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.billing-info[b-p1yjd4rqgx] {
    color: rgba(255, 255, 255, 0.75);
}

.dd-indicator[b-p1yjd4rqgx] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.dd-indicator.active[b-p1yjd4rqgx] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.dd-indicator.inactive[b-p1yjd4rqgx] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.btn-pay[b-p1yjd4rqgx] {
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    padding: 10px 32px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: not-allowed;
    opacity: 0.6;
}

.billing-stats[b-p1yjd4rqgx] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.stat-card[b-p1yjd4rqgx] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    flex: 1;
    box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.08));
    text-align: center;
}

.stat-icon[b-p1yjd4rqgx] {
    font-size: 1.2rem;
    margin-bottom: 4px;
    color: var(--brand-primary, #1a7a4a);
}

.stat-value[b-p1yjd4rqgx] {
    font-weight: 600;
    font-size: 0.95rem;
}

.stat-label[b-p1yjd4rqgx] {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
}

.dd-status.active[b-p1yjd4rqgx] {
    color: #2e7d32;
}

.dd-status.inactive[b-p1yjd4rqgx] {
    color: #e65100;
}

.filter-tabs[b-p1yjd4rqgx] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
}

.filter-tab[b-p1yjd4rqgx] {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border, #e8e8e8);
    background: white;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.filter-tab.active[b-p1yjd4rqgx] {
    background: var(--brand-primary, #1a7a4a);
    color: white;
    border-color: var(--brand-primary, #1a7a4a);
}

.transaction-list[b-p1yjd4rqgx] {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.08));
    overflow: hidden;
}

.transaction-item[b-p1yjd4rqgx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border, #e8e8e8);
}

.transaction-item:last-child[b-p1yjd4rqgx] {
    border-bottom: none;
}

.type-dot[b-p1yjd4rqgx] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.type-dot.invoice[b-p1yjd4rqgx] {
    background: #EF5350;
}

.type-dot.payment[b-p1yjd4rqgx] {
    background: var(--success, #2e7d32);
}

.type-dot.credit-note[b-p1yjd4rqgx] {
    background: #42A5F5;
}

.transaction-details[b-p1yjd4rqgx] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.transaction-ref[b-p1yjd4rqgx] {
    font-weight: 600;
    font-size: 0.85rem;
}

.transaction-date[b-p1yjd4rqgx] {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
}

.transaction-amounts[b-p1yjd4rqgx] {
    text-align: right;
}

.transaction-gross[b-p1yjd4rqgx] {
    font-weight: 600;
    font-size: 0.9rem;
    display: block;
}

.transaction-gross.positive[b-p1yjd4rqgx] {
    color: var(--success, #2e7d32);
}

.transaction-balance[b-p1yjd4rqgx] {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
}

.pagination[b-p1yjd4rqgx] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}

.page-btn[b-p1yjd4rqgx] {
    background: none;
    border: 1px solid var(--brand-primary, #1a7a4a);
    color: var(--brand-primary, #1a7a4a);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.page-btn:hover:not(:disabled)[b-p1yjd4rqgx] {
    background: var(--brand-primary, #1a7a4a);
    color: white;
}

.page-btn:disabled[b-p1yjd4rqgx] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info[b-p1yjd4rqgx] {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}

.download-row[b-p1yjd4rqgx] {
    text-align: center;
    margin-top: 8px;
}

.btn-download[b-p1yjd4rqgx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--brand-primary, #1a7a4a);
    color: var(--brand-primary, #1a7a4a);
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-download:hover[b-p1yjd4rqgx] {
    background: var(--brand-primary, #1a7a4a);
    color: white;
}

.empty-message[b-p1yjd4rqgx] {
    text-align: center;
    color: var(--text-secondary, #666);
    padding: 32px 16px;
    font-size: 0.95rem;
}

.error-message[b-p1yjd4rqgx] {
    color: #c0392b;
    font-size: 0.85rem;
    padding: 12px 16px;
    background: #fdf0ef;
    border-radius: 8px;
    text-align: center;
}
/* /Pages/Bins.razor.rz.scp.css */
.bins-page[b-fsc26cyuzy] {
    padding-bottom: 80px;
}

.page-title[b-fsc26cyuzy] {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--brand-primary-dark);
}

.section[b-fsc26cyuzy] {
    margin-bottom: 16px;
}

.section-title[b-fsc26cyuzy] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-primary-dark);
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 3px solid var(--brand-primary);
}

.next-collection-card[b-fsc26cyuzy] {
    background: var(--brand-gradient);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    margin-bottom: 16px;
    box-shadow: var(--shadow-lg, 0 4px 16px rgba(0,0,0,0.12));
    color: white;
}

.next-collection-label[b-fsc26cyuzy] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.next-collection-day[b-fsc26cyuzy] {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.next-collection-countdown[b-fsc26cyuzy] {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 4px;
}

.next-collection-countdown.today[b-fsc26cyuzy] {
    color: #FFCDD2;
}

.next-collection-countdown.tomorrow[b-fsc26cyuzy] {
    color: #FFE0B2;
}

.next-collection-countdown.soon[b-fsc26cyuzy] {
    color: rgba(255, 255, 255, 0.9);
}

.next-collection-bins[b-fsc26cyuzy] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 8px;
}

.collections-scroll[b-fsc26cyuzy] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.collection-card[b-fsc26cyuzy] {
    min-width: 140px;
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.08));
    border-left: 4px solid #ccc;
    position: relative;
}

.collection-card.waste[b-fsc26cyuzy] {
    border-left-color: #424242;
}

.collection-card.recycling[b-fsc26cyuzy] {
    border-left-color: var(--brand-primary, #1a7a4a);
}

.collection-card.compost[b-fsc26cyuzy] {
    border-left-color: #795548;
}

.collection-card.glass[b-fsc26cyuzy] {
    border-left-color: #1565C0;
}

.collection-countdown[b-fsc26cyuzy] {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.7rem;
    background: var(--brand-primary-light, #e8f5e9);
    color: var(--brand-primary, #1a7a4a);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.collection-type[b-fsc26cyuzy] {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.collection-date[b-fsc26cyuzy] {
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
}

.collection-bin[b-fsc26cyuzy] {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
    margin-top: 4px;
}

.usage-grid[b-fsc26cyuzy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@@media (min-width: 768px) {
    .usage-grid[b-fsc26cyuzy] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.usage-card[b-fsc26cyuzy] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.08));
    border-top: 3px solid #ccc;
}

.usage-card.waste[b-fsc26cyuzy] {
    border-top-color: #424242;
}

.usage-card.recycling[b-fsc26cyuzy] {
    border-top-color: var(--brand-primary, #1a7a4a);
}

.usage-card.compost[b-fsc26cyuzy] {
    border-top-color: #795548;
}

.usage-card.glass[b-fsc26cyuzy] {
    border-top-color: #1565C0;
}

.usage-product[b-fsc26cyuzy] {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.usage-stat-main[b-fsc26cyuzy] {
    font-size: 1.3rem;
    font-weight: 700;
}

.usage-stat-unit[b-fsc26cyuzy] {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
    font-weight: 400;
}

.usage-stat-secondary[b-fsc26cyuzy] {
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
    margin-top: 4px;
}

.eco-card[b-fsc26cyuzy] {
    background: var(--brand-primary-light, #e8f5e9);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.eco-icon[b-fsc26cyuzy] {
    font-size: 2rem;
    color: var(--brand-primary, #1a7a4a);
}

.eco-stat[b-fsc26cyuzy] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
}

.eco-detail[b-fsc26cyuzy] {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}

.lift-list[b-fsc26cyuzy] {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.08));
    overflow: hidden;
}

.lift-item[b-fsc26cyuzy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border, #e8e8e8);
}

.lift-item:last-child[b-fsc26cyuzy] {
    border-bottom: none;
}

.type-dot[b-fsc26cyuzy] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.type-dot.waste[b-fsc26cyuzy] {
    background: #424242;
}

.type-dot.recycling[b-fsc26cyuzy] {
    background: var(--brand-primary, #1a7a4a);
}

.type-dot.compost[b-fsc26cyuzy] {
    background: #795548;
}

.type-dot.glass[b-fsc26cyuzy] {
    background: #1565C0;
}

.lift-details[b-fsc26cyuzy] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.lift-product[b-fsc26cyuzy] {
    font-weight: 600;
    font-size: 0.85rem;
}

.lift-date[b-fsc26cyuzy] {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
}

.lift-weight[b-fsc26cyuzy] {
    font-weight: 600;
    font-size: 0.9rem;
}

.btn-view-all[b-fsc26cyuzy] {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px;
    color: var(--brand-primary, #1a7a4a);
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-top: 1px solid var(--border, #e8e8e8);
    background: white;
    border-radius: 0 0 12px 12px;
    font-size: 0.9rem;
    transition: background 0.15s;
}

.btn-view-all:hover[b-fsc26cyuzy] {
    background: var(--brand-primary-light, #e8f5e9);
}

.trend-card[b-fsc26cyuzy] {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.08));
    overflow: hidden;
}

.trend-item[b-fsc26cyuzy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, #e8e8e8);
}

.trend-item:last-child[b-fsc26cyuzy] {
    border-bottom: none;
}

.trend-text[b-fsc26cyuzy] {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary, #1a1a2e);
    line-height: 1.4;
}

.trend-arrow[b-fsc26cyuzy] {
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.trend-arrow.trend-down[b-fsc26cyuzy] {
    color: var(--brand-primary, #1a7a4a);
}

.trend-arrow.trend-up[b-fsc26cyuzy] {
    color: #E65100;
}

.trend-arrow.trend-stable[b-fsc26cyuzy] {
    color: var(--text-secondary, #666);
}

.trend-collecting[b-fsc26cyuzy] {
    text-align: center;
    color: var(--text-secondary, #666);
    padding: 20px 16px;
    font-size: 0.9rem;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.08));
}

.empty-message[b-fsc26cyuzy] {
    text-align: center;
    color: var(--text-secondary, #666);
    padding: 32px 16px;
    font-size: 0.95rem;
}

.error-message[b-fsc26cyuzy] {
    color: #c0392b;
    font-size: 0.85rem;
    padding: 12px 16px;
    background: #fdf0ef;
    border-radius: 8px;
    text-align: center;
}
/* /Pages/BinWeightInsights.razor.rz.scp.css */
.insights-page[b-ei1wzjeowc] {
    padding-bottom: 80px;
}

.page-title[b-ei1wzjeowc] {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--brand-primary-dark);
}

.section-title[b-ei1wzjeowc] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-primary-dark);
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 3px solid var(--brand-primary);
}

.chart-card[b-ei1wzjeowc] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.08));
    margin-bottom: 16px;
}

.chart-container[b-ei1wzjeowc] {
    width: 100%;
    overflow-x: auto;
}

.weight-chart[b-ei1wzjeowc] {
    width: 100%;
    height: auto;
    min-height: 250px;
}

.chart-line[b-ei1wzjeowc] {
    transition: opacity 0.2s;
}

.chart-dot[b-ei1wzjeowc] {
    transition: r 0.2s;
}

.chart-legend[b-ei1wzjeowc] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border, #e8e8e8);
}

.legend-item[b-ei1wzjeowc] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-dot[b-ei1wzjeowc] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-label[b-ei1wzjeowc] {
    font-size: 0.85rem;
    color: var(--text-primary, #1a1a2e);
}

.insufficient-data[b-ei1wzjeowc] {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary, #666);
}

.insufficient-icon[b-ei1wzjeowc] {
    color: var(--text-secondary, #666);
    opacity: 0.5;
    margin-bottom: 16px;
}

.insufficient-data p[b-ei1wzjeowc] {
    margin: 0 0 8px;
    font-size: 1rem;
}

.insufficient-detail[b-ei1wzjeowc] {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}

.error-message[b-ei1wzjeowc] {
    color: #c0392b;
    font-size: 0.85rem;
    padding: 12px 16px;
    background: #fdf0ef;
    border-radius: 8px;
    text-align: center;
}

.trend-summary-card[b-ei1wzjeowc] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.08));
    margin-bottom: 16px;
}

.trend-item[b-ei1wzjeowc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.trend-dot[b-ei1wzjeowc] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.trend-text[b-ei1wzjeowc] {
    font-size: 0.95rem;
    color: var(--text-primary, #1a1a2e);
}

.trend-positive[b-ei1wzjeowc] {
    color: #1a7a4a;
}

.trend-negative[b-ei1wzjeowc] {
    color: #c0392b;
}

.trend-steady[b-ei1wzjeowc] {
    color: var(--text-secondary, #666);
}

.trend-collecting[b-ei1wzjeowc] {
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
    margin: 0;
}

.sizing-suggestions-card[b-ei1wzjeowc] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.08));
    margin-bottom: 16px;
}

.suggestion-item[b-ei1wzjeowc] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.suggestion-item:last-child[b-ei1wzjeowc] {
    margin-bottom: 0;
}

.suggestion-icon[b-ei1wzjeowc] {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.suggestion-downsize[b-ei1wzjeowc] {
    background: #e8f5e9;
}

.suggestion-downsize .suggestion-icon[b-ei1wzjeowc] {
    background: #c8e6c9;
    color: #2e7d32;
}

.suggestion-upsize[b-ei1wzjeowc] {
    background: #fff3e0;
}

.suggestion-upsize .suggestion-icon[b-ei1wzjeowc] {
    background: #ffe0b2;
    color: #e65100;
}

.suggestion-content[b-ei1wzjeowc] {
    flex: 1;
}

.suggestion-text[b-ei1wzjeowc] {
    margin: 0 0 4px;
    font-size: 0.95rem;
    color: var(--text-primary, #1a1a2e);
    font-weight: 500;
}

.suggestion-detail[b-ei1wzjeowc] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
}

.ratio-card[b-ei1wzjeowc] {
    margin-top: 16px;
}

.ratio-summary[b-ei1wzjeowc] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.ratio-value[b-ei1wzjeowc] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a7a4a;
}

.ratio-label[b-ei1wzjeowc] {
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
}

.ratio-trend[b-ei1wzjeowc] {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
}

.ratio-trend.trend-up[b-ei1wzjeowc] {
    color: #1a7a4a;
    background: #e8f5e9;
}

.ratio-trend.trend-down[b-ei1wzjeowc] {
    color: #c0392b;
    background: #fdf0ef;
}

.ratio-chart[b-ei1wzjeowc] {
    min-height: 200px;
}

.seasonal-card[b-ei1wzjeowc] {
    margin-top: 16px;
}

.seasonal-list[b-ei1wzjeowc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.seasonal-item[b-ei1wzjeowc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface, #f8f9fa);
    border-radius: 8px;
    gap: 12px;
    flex-wrap: wrap;
}

.seasonal-product[b-ei1wzjeowc] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    min-width: 100px;
}

.seasonal-values[b-ei1wzjeowc] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
}

.seasonal-current[b-ei1wzjeowc] {
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
}

.seasonal-vs[b-ei1wzjeowc] {
    color: var(--text-secondary, #999);
    font-size: 0.8rem;
}

.seasonal-previous[b-ei1wzjeowc] {
    color: var(--text-secondary, #666);
}

.seasonal-change[b-ei1wzjeowc] {
    font-weight: 600;
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.seasonal-change.change-down[b-ei1wzjeowc] {
    color: #1a7a4a;
    background: #e8f5e9;
}

.seasonal-change.change-up[b-ei1wzjeowc] {
    color: #c0392b;
    background: #fdf0ef;
}

.seasonal-collecting[b-ei1wzjeowc] {
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
    text-align: center;
    padding: 16px;
}

.benchmark-card[b-ei1wzjeowc] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.08));
    margin-bottom: 16px;
}

.benchmark-subtitle[b-ei1wzjeowc] {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    margin: 0 0 16px;
}

.benchmark-list[b-ei1wzjeowc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.benchmark-item[b-ei1wzjeowc] {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border, #e8e8e8);
}

.benchmark-item:last-child[b-ei1wzjeowc] {
    padding-bottom: 0;
    border-bottom: none;
}

.benchmark-header[b-ei1wzjeowc] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.benchmark-dot[b-ei1wzjeowc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.benchmark-product[b-ei1wzjeowc] {
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
}

.benchmark-comparison[b-ei1wzjeowc] {
    font-size: 0.8rem;
    font-weight: 600;
}

.benchmark-positive[b-ei1wzjeowc] {
    color: #1a7a4a;
}

.benchmark-negative[b-ei1wzjeowc] {
    color: #c0392b;
}

.benchmark-neutral[b-ei1wzjeowc] {
    color: var(--text-secondary, #666);
}

.benchmark-bars[b-ei1wzjeowc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.benchmark-bar-row[b-ei1wzjeowc] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.benchmark-bar-label[b-ei1wzjeowc] {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
    width: 32px;
    flex-shrink: 0;
}

.benchmark-bar-track[b-ei1wzjeowc] {
    flex: 1;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.benchmark-bar-fill[b-ei1wzjeowc] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.benchmark-bar-fill.yours[b-ei1wzjeowc] {
    background: var(--brand-primary, #1a7a4a);
}

.benchmark-bar-fill.area[b-ei1wzjeowc] {
    background: #bdbdbd;
}

.benchmark-bar-value[b-ei1wzjeowc] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    width: 52px;
    text-align: right;
    flex-shrink: 0;
}

.benchmark-footnote[b-ei1wzjeowc] {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
    margin: 12px 0 0;
    text-align: center;
}
/* /Shared/RetentionBanner.razor.rz.scp.css */
.retention-banner[b-ud7uthx6gc] {
    background: var(--bg-card, #FFFFFF);
    border-radius: var(--radius, 16px);
    box-shadow: var(--shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
    padding: 20px 24px;
    border-left: 4px solid var(--border, #E0E0E0);
    animation: fadeInUp 0.3s ease-out;
}

.retention-banner.band-critical[b-ud7uthx6gc] {
    border-left-color: var(--error, #D32F2F);
}

.retention-banner.band-monitor[b-ud7uthx6gc] {
    border-left-color: #F9A825;
}

.retention-banner.band-default[b-ud7uthx6gc] {
    border-left-color: var(--brand-primary, #00A651);
}

.retention-banner-content[b-ud7uthx6gc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.retention-banner-headline[b-ud7uthx6gc] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #212121);
    margin: 0;
}

.retention-banner-body[b-ud7uthx6gc] {
    font-size: 0.9rem;
    color: var(--text-secondary, #757575);
    margin: 0;
    line-height: 1.5;
}

.retention-banner-actions[b-ud7uthx6gc] {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.retention-btn-accept[b-ud7uthx6gc] {
    width: auto;
    padding: 8px 20px;
    font-size: 0.9rem;
}

.retention-btn-dismiss[b-ud7uthx6gc] {
    background: none;
    border: 1px solid var(--border, #E0E0E0);
    color: var(--text-secondary, #757575);
    border-radius: var(--radius-sm, 10px);
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.retention-btn-dismiss:hover:not(:disabled)[b-ud7uthx6gc] {
    background: var(--bg-page, #F5F5F5);
    border-color: var(--text-secondary, #757575);
}

.retention-btn-dismiss:disabled[b-ud7uthx6gc] {
    opacity: 0.5;
    cursor: not-allowed;
}

.retention-banner-success[b-ud7uthx6gc] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 14px;
    background: var(--brand-primary-light, #E8F5E9);
    color: var(--success, #2E7D32);
    border-radius: var(--radius-sm, 10px);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Full width on mobile */
@media (max-width: 767px) {
    .retention-banner[b-ud7uthx6gc] {
        padding: 16px;
    }

    .retention-banner-actions[b-ud7uthx6gc] {
        flex-direction: column;
    }

    .retention-btn-accept[b-ud7uthx6gc],
    .retention-btn-dismiss[b-ud7uthx6gc] {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}