@archerjessop/utilities 3.5.0 → 3.6.0

package/dist/index.js

@@ -1,2 +1,2 @@
-export{calculateAppreciatedValue,calculateAssignmentFee,calculateBalloonBalance,calculateCOCR30,calculateCOCRAtPercent,calculateCashFlow,calculateCashFlowYield,calculateCashOutAfterRefi,calculateDscrPayment,calculateNOIByType,calculateNetToBuyer,calculatePMT,calculatePriceForCOCR,calculateSfPayment}from"./financial/calculations.js";export{formatCurrency,formatPercentage,formatPriceValue}from"./financial/formatters.js";export{extractBedrooms,extractPhoneNumber}from"./data/extractors.js";export{calculateDOM}from"./date/utilities.js";export{calculateCursorPosition,extractNumericValue,filterNumericInput,formatInputDisplay,formatLiveInput,formatLiveNumber,parseNumericInput}from"./formatting/financial-formatting.js";export{CALCULATION_TOLERANCE,DEFAULT_CAP_RATE,DEFAULT_DOWN_PAYMENT,DEFAULT_DSCR_PERCENTAGE,DSCR_AMORTIZATION,DSCR_INTEREST_RATE,FINANCIAL_CONSTANTS,MAX_ITERATIONS,SELLER_FI_AMORTIZATION,SELLER_FI_CARRY,SELLER_FI_DOWN_PAYMENT,SELLER_FI_INTEREST_RATE}from"./config/financial.js";export{ASSISTED_LIVING,MULTIFAMILY,PROPERTY_TYPES,PROPERTY_TYPE_CONSTANTS,STR}from"./config/property-types.js";export{ASSIGNMENT_FEE_PERCENTAGE,BUSINESS_CONSTANTS,BUYER_AGENT_COMMISSION,CLOSING_COSTS_PERCENTAGE,CONSERVATIVE_COCR15_PRICE_MULTIPLIER,FINANCING_FEE_PERCENTAGE,MAX_COCR15_PRICE_MULTIPLIER,MINIMUM_COCR15_PRICE,NET_TO_BUYER_PERCENTAGE,SELLER_AGENT_COMMISSION}from"./config/business.js";
+export{calculateAppreciatedValue,calculateAssignmentFee,calculateBalloonBalance,calculateCOCR30,calculateCOCRAtPercent,calculateCashFlow,calculateCashFlowYield,calculateCashOutAfterRefi,calculateDscrPayment,calculateNOIByType,calculateNetToBuyer,calculatePMT,calculatePriceForCOCR,calculateSfPayment}from"./financial/calculations.js";export{formatCurrency,formatPercentage,formatPriceValue}from"./financial/formatters.js";export{extractBedrooms,extractPhoneNumber}from"./data/extractors.js";export{calculateDOM}from"./date/utilities.js";export{calculateCursorPosition,extractNumericValue,filterNumericInput,formatInputDisplay,formatLiveInput,formatLiveNumber,parseNumericInput}from"./formatting/financial-formatting.js";export{CALCULATION_TOLERANCE,DEFAULT_CAP_RATE,DEFAULT_DOWN_PAYMENT,DEFAULT_DSCR_PERCENTAGE,DSCR_AMORTIZATION,DSCR_INTEREST_RATE,FINANCIAL_CONSTANTS,MAX_ITERATIONS,SELLER_FI_AMORTIZATION,SELLER_FI_CARRY,SELLER_FI_DOWN_PAYMENT,SELLER_FI_INTEREST_RATE}from"./config/financial.js";export{ASSISTED_LIVING,MULTIFAMILY,PROPERTY_TYPES,PROPERTY_TYPE_CONSTANTS,STR}from"./config/property-types.js";export{ASSIGNMENT_FEE_PERCENTAGE,BUSINESS_CONSTANTS,BUYER_AGENT_COMMISSION,CLOSING_COSTS_PERCENTAGE,CONSERVATIVE_COCR15_PRICE_MULTIPLIER,FINANCING_FEE_PERCENTAGE,MAX_COCR15_PRICE_MULTIPLIER,MINIMUM_COCR15_PRICE,NET_TO_BUYER_PERCENTAGE,SELLER_AGENT_COMMISSION}from"./config/business.js";export{injectDashboardStyles,injectFooterStyles,styles}from"./styles/browser.js";
 //# sourceMappingURL=index.js.map

package/dist/styles/browser.js

@@ -0,0 +1,2 @@
+const r={variables:"/* Shared CSS custom properties - extracted from your existing styles */\r\n:root {\r\n  /* Colors */\r\n  --color-primary: #007bff;\r\n  --color-primary-hover: #0056b3;\r\n  --color-secondary: #6c757d;\r\n  --color-success: #28a745;\r\n  --color-warning: #ffc107;\r\n  --color-danger: #dc3545;\r\n  --color-info: #17a2b8;\r\n  \r\n  /* Backgrounds */\r\n  --bg-primary: #ffffff;\r\n  --bg-secondary: #f8f9fa;\r\n  --bg-light: #ededed;\r\n  --bg-dark: #343a40;\r\n  \r\n  /* Text Colors */\r\n  --text-primary: #212529;\r\n  --text-secondary: #6c757d;\r\n  --text-muted: #495057;\r\n  --text-white: #ffffff;\r\n  \r\n  /* Borders */\r\n  --border-color: #ddd;\r\n  --border-color-light: #e9ecef;\r\n  --border-color-dark: #919090ff;\r\n  \r\n  /* Spacing */\r\n  --spacing-xs: 4px;\r\n  --spacing-sm: 8px;\r\n  --spacing-md: 12px;\r\n  --spacing-lg: 16px;\r\n  --spacing-xl: 20px;\r\n  --spacing-2xl: 24px;\r\n  --spacing-3xl: 32px;\r\n  \r\n  /* Typography */\r\n  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\r\n  --font-size-xs: 11px;\r\n  --font-size-sm: 12px;\r\n  --font-size-base: 14px;\r\n  --font-size-md: 16px;\r\n  --font-size-lg: 18px;\r\n  --font-size-xl: 20px;\r\n  --font-weight-normal: 400;\r\n  --font-weight-medium: 500;\r\n  --font-weight-semibold: 600;\r\n  --font-weight-bold: 700;\r\n  \r\n  /* Border Radius */\r\n  --border-radius-sm: 4px;\r\n  --border-radius-md: 6px;\r\n  --border-radius-lg: 8px;\r\n  --border-radius-xl: 12px;\r\n  \r\n  /* Shadows */\r\n  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\r\n  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n  --shadow-lg: 0 -8px 32px rgba(0, 0, 0, 0.08);\r\n  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);\r\n  \r\n  /* Z-index */\r\n  --z-extension: 999999999;\r\n  --z-modal: 1050;\r\n  --z-dropdown: 1000;\r\n  \r\n  /* Transitions */\r\n  --transition-fast: 150ms ease;\r\n  --transition-base: 250ms ease;\r\n  --transition-slow: 350ms ease;\r\n}",footer:"/* LoopNet Extension Footer - Extracted from content.js AS-IS */\r\n.ln-footer {\r\n  position: fixed;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  background: var(--bg-light, #ededed);\r\n  border-top: 1px solid var(--border-color-dark, #919090ff);\r\n  box-shadow: var(--shadow-lg, 0 -8px 32px rgba(0, 0, 0, 0.08));\r\n  z-index: var(--z-extension, 999999999);\r\n  padding: var(--spacing-lg, 16px) var(--spacing-2xl, 24px);\r\n  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);\r\n  font-size: var(--font-size-md, 16px);\r\n  color: var(--text-primary, #212529);\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.ln-footer-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  max-width: 1600px;\r\n  margin: 0 auto;\r\n  gap: var(--spacing-xl, 20px);\r\n}\r\n\r\n.ln-footer-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-md, 12px);\r\n  flex: 1;\r\n  width: 100%;\r\n}\r\n\r\n.ln-footer-right {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-lg, 16px);\r\n  flex-shrink: 0;\r\n}\r\n\r\n.ln-metrics-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(9, 1fr);\r\n  gap: var(--spacing-lg, 16px);\r\n  align-items: start;\r\n}\r\n\r\n.ln-metric-column {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-sm, 8px);\r\n}\r\n\r\n.ln-metric {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  min-width: 0;\r\n}\r\n\r\n.ln-metric-label {\r\n  font-size: var(--font-size-xs, 11px);\r\n  color: var(--text-secondary, #6c757d);\r\n  font-weight: var(--font-weight-medium, 500);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n  line-height: 1;\r\n}\r\n\r\n.ln-metric-value {\r\n  font-weight: var(--font-weight-semibold, 600);\r\n  font-size: var(--font-size-md, 16px);\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  line-height: 1.2;\r\n}\r\n\r\n.ln-price {\r\n  color: var(--color-primary, #007bff);\r\n  font-weight: var(--font-weight-bold, 700);\r\n}\r\n\r\n.ln-cashflow.negative {\r\n  color: var(--color-danger, #dc3545);\r\n}\r\n\r\n.ln-cashflow.positive {\r\n  color: var(--color-success, #28a745);\r\n}\r\n\r\n.ln-phone {\r\n  color: var(--color-info, #17a2b8);\r\n  cursor: pointer;\r\n  text-decoration: underline;\r\n}\r\n\r\n.ln-phone:hover {\r\n  color: var(--color-primary, #007bff);\r\n}\r\n\r\n.ln-property-type-dropdown {\r\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\r\n  border: 1px solid var(--border-color, #ddd);\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-base, 14px);\r\n  background: var(--bg-primary, #ffffff);\r\n  color: var(--text-primary, #212529);\r\n  cursor: pointer;\r\n  min-width: 120px;\r\n}\r\n\r\n.ln-property-type-dropdown:focus {\r\n  outline: none;\r\n  border-color: var(--color-primary, #007bff);\r\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\r\n}\r\n\r\n.ln-export-button {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-sm, 8px);\r\n  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);\r\n  background: var(--color-primary, #007bff);\r\n  color: var(--text-white, #ffffff);\r\n  border: none;\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-base, 14px);\r\n  font-weight: var(--font-weight-medium, 500);\r\n  cursor: pointer;\r\n  transition: background-color var(--transition-fast, 150ms ease);\r\n}\r\n\r\n.ln-export-button:hover {\r\n  background: var(--color-primary-hover, #0056b3);\r\n}\r\n\r\n.ln-export-icon {\r\n  width: 16px;\r\n  height: 16px;\r\n  fill: currentColor;\r\n}\r\n\r\n.ln-discount-controls {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-sm, 8px);\r\n  margin-top: var(--spacing-sm, 8px);\r\n}\r\n\r\n.ln-discount-input {\r\n  width: 60px;\r\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\r\n  border: 1px solid var(--border-color, #ddd);\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-sm, 12px);\r\n  text-align: center;\r\n}\r\n\r\n.ln-discount-button {\r\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\r\n  background: var(--color-secondary, #6c757d);\r\n  color: var(--text-white, #ffffff);\r\n  border: none;\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-xs, 11px);\r\n  cursor: pointer;\r\n  transition: background-color var(--transition-fast, 150ms ease);\r\n}\r\n\r\n.ln-discount-button:hover {\r\n  background: var(--color-primary, #007bff);\r\n}\r\n\r\n.ln-discount-button.active {\r\n  background: var(--color-primary, #007bff);\r\n}\r\n\r\n@media (max-width: 1400px) {\r\n  .ln-metrics-grid {\r\n    grid-template-columns: repeat(6, 1fr);\r\n  }\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .ln-footer {\r\n    padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);\r\n  }\r\n  \r\n  .ln-footer-container {\r\n    flex-direction: column;\r\n    gap: var(--spacing-md, 12px);\r\n  }\r\n  \r\n  .ln-metrics-grid {\r\n    grid-template-columns: repeat(4, 1fr);\r\n  }\r\n  \r\n  .ln-footer-right {\r\n    width: 100%;\r\n    justify-content: flex-end;\r\n  }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .ln-metrics-grid {\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: var(--spacing-md, 12px);\r\n  }\r\n  \r\n  .ln-metric-value {\r\n    font-size: var(--font-size-base, 14px);\r\n  }\r\n}",dashboard:"/* Dashboard styles - extracted from existing dashboard CSS AS-IS */\r\n\r\n/* Base dashboard styles */\r\n.dashboard-container {\r\n  min-height: 100vh;\r\n  background: var(--bg-secondary, #f8f9fa);\r\n  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);\r\n  color: var(--text-primary, #212529);\r\n}\r\n\r\n.header {\r\n  background: var(--bg-primary, white);\r\n  padding: var(--spacing-xl, 20px) var(--spacing-2xl, 24px);\r\n  border-bottom: 1px solid var(--border-color-light, #e9ecef);\r\n  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));\r\n}\r\n\r\n.header h1 {\r\n  color: var(--color-primary, #007bff);\r\n  margin-bottom: var(--spacing-xl, 20px);\r\n}\r\n\r\n.filters {\r\n  display: flex;\r\n  gap: var(--spacing-lg, 15px);\r\n  flex-wrap: wrap;\r\n  align-items: end;\r\n}\r\n\r\n.filter-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-xs, 5px);\r\n}\r\n\r\n.filter-group label {\r\n  font-size: var(--font-size-sm, 12px);\r\n  color: var(--text-secondary, #6c757d);\r\n  font-weight: var(--font-weight-medium, 500);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.filter-group input, .filter-group select {\r\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\r\n  border: 1px solid var(--border-color, #ddd);\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-base, 14px);\r\n  min-width: 120px;\r\n}\r\n\r\n.filter-group button {\r\n  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);\r\n  background: var(--color-primary, #007bff);\r\n  color: var(--text-white, white);\r\n  border: none;\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-base, 14px);\r\n  cursor: pointer;\r\n}\r\n\r\n.filter-group button:hover {\r\n  background: var(--color-primary-hover, #0056b3);\r\n}\r\n\r\n.stats {\r\n  display: flex;\r\n  gap: var(--spacing-xl, 20px);\r\n  margin-top: var(--spacing-xl, 20px);\r\n  font-size: var(--font-size-base, 14px);\r\n  color: var(--text-secondary, #6c757d);\r\n}\r\n\r\n.table-container {\r\n  background: var(--bg-primary, white);\r\n  border-radius: var(--border-radius-lg, 8px);\r\n  box-shadow: var(--shadow-base, 0 2px 4px rgba(0,0,0,0.1));\r\n  overflow: hidden;\r\n}\r\n\r\ntable {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n}\r\n\r\nth, td {\r\n  padding: var(--spacing-lg, 15px) var(--spacing-md, 12px);\r\n  text-align: left;\r\n  border-bottom: 1px solid var(--border-color-light, #e9ecef);\r\n}\r\n\r\nth {\r\n  background: var(--bg-secondary, #f8f9fa);\r\n  font-weight: var(--font-weight-semibold, 600);\r\n  color: var(--text-muted, #495057);\r\n  font-size: var(--font-size-sm, 12px);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\nth a {\r\n  color: var(--text-muted, #495057);\r\n  text-decoration: none;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-xs, 4px);\r\n}\r\n\r\nth a:hover {\r\n  color: var(--color-primary, #007bff);\r\n}\r\n\r\nth a.sort-active {\r\n  color: var(--color-primary, #007bff);\r\n  font-weight: var(--font-weight-bold, 700);\r\n}\r\n\r\ntr:hover {\r\n  background: var(--bg-secondary, #f8f9fa);\r\n}\r\n\r\n.property-link {\r\n  color: var(--color-primary, #007bff);\r\n  text-decoration: none;\r\n  font-weight: var(--font-weight-medium, 500);\r\n}\r\n\r\n.property-link:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.contract-state {\r\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\r\n  border-radius: var(--border-radius-xl, 12px);\r\n  font-size: var(--font-size-xs, 11px);\r\n  font-weight: var(--font-weight-semibold, 600);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.contract-none { \r\n  background: var(--border-color-light, #e9ecef); \r\n  color: var(--text-muted, #495057); \r\n}\r\n\r\n.contract-loi_sent { \r\n  background: #fff3cd; \r\n  color: #856404; \r\n}\r\n\r\n.contract-loi_agreed { \r\n  background: #d4edda; \r\n  color: #155724; \r\n}\r\n\r\n.contract-loi_rejected { \r\n  background: #f8d7da; \r\n  color: #721c24; \r\n}\r\n\r\n.contract-contract_signed { \r\n  background: #d1ecf1; \r\n  color: #0c5460; \r\n}\r\n\r\n.contract-closed { \r\n  background: #d4edda; \r\n  color: #155724; \r\n}\r\n\r\n.contract-not_interested { \r\n  background: #f8d7da; \r\n  color: #721c24; \r\n}\r\n\r\n.date-cell {\r\n  font-size: var(--font-size-sm, 13px);\r\n  color: var(--text-secondary, #6c757d);\r\n}\r\n\r\n.pagination {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: var(--spacing-sm, 8px);\r\n  margin-top: var(--spacing-xl, 20px);\r\n  padding: var(--spacing-xl, 20px);\r\n}\r\n\r\n.page-link {\r\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\r\n  background: var(--bg-primary, white);\r\n  border: 1px solid var(--border-color, #ddd);\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  color: var(--text-primary, #212529);\r\n  text-decoration: none;\r\n  transition: all var(--transition-fast, 150ms ease);\r\n}\r\n\r\n.page-link:hover {\r\n  background: var(--color-primary, #007bff);\r\n  color: var(--text-white, white);\r\n  border-color: var(--color-primary, #007bff);\r\n}\r\n\r\n.page-link.active {\r\n  background: var(--color-primary, #007bff);\r\n  color: var(--text-white, white);\r\n  border-color: var(--color-primary, #007bff);\r\n}",extension:"/* Shared CSS custom properties - extracted from your existing styles */\r\n:root {\r\n  /* Colors */\r\n  --color-primary: #007bff;\r\n  --color-primary-hover: #0056b3;\r\n  --color-secondary: #6c757d;\r\n  --color-success: #28a745;\r\n  --color-warning: #ffc107;\r\n  --color-danger: #dc3545;\r\n  --color-info: #17a2b8;\r\n  \r\n  /* Backgrounds */\r\n  --bg-primary: #ffffff;\r\n  --bg-secondary: #f8f9fa;\r\n  --bg-light: #ededed;\r\n  --bg-dark: #343a40;\r\n  \r\n  /* Text Colors */\r\n  --text-primary: #212529;\r\n  --text-secondary: #6c757d;\r\n  --text-muted: #495057;\r\n  --text-white: #ffffff;\r\n  \r\n  /* Borders */\r\n  --border-color: #ddd;\r\n  --border-color-light: #e9ecef;\r\n  --border-color-dark: #919090ff;\r\n  \r\n  /* Spacing */\r\n  --spacing-xs: 4px;\r\n  --spacing-sm: 8px;\r\n  --spacing-md: 12px;\r\n  --spacing-lg: 16px;\r\n  --spacing-xl: 20px;\r\n  --spacing-2xl: 24px;\r\n  --spacing-3xl: 32px;\r\n  \r\n  /* Typography */\r\n  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\r\n  --font-size-xs: 11px;\r\n  --font-size-sm: 12px;\r\n  --font-size-base: 14px;\r\n  --font-size-md: 16px;\r\n  --font-size-lg: 18px;\r\n  --font-size-xl: 20px;\r\n  --font-weight-normal: 400;\r\n  --font-weight-medium: 500;\r\n  --font-weight-semibold: 600;\r\n  --font-weight-bold: 700;\r\n  \r\n  /* Border Radius */\r\n  --border-radius-sm: 4px;\r\n  --border-radius-md: 6px;\r\n  --border-radius-lg: 8px;\r\n  --border-radius-xl: 12px;\r\n  \r\n  /* Shadows */\r\n  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\r\n  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n  --shadow-lg: 0 -8px 32px rgba(0, 0, 0, 0.08);\r\n  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);\r\n  \r\n  /* Z-index */\r\n  --z-extension: 999999999;\r\n  --z-modal: 1050;\r\n  --z-dropdown: 1000;\r\n  \r\n  /* Transitions */\r\n  --transition-fast: 150ms ease;\r\n  --transition-base: 250ms ease;\r\n  --transition-slow: 350ms ease;\r\n}/* LoopNet Extension Footer - Extracted from content.js AS-IS */\r\n.ln-footer {\r\n  position: fixed;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  background: var(--bg-light, #ededed);\r\n  border-top: 1px solid var(--border-color-dark, #919090ff);\r\n  box-shadow: var(--shadow-lg, 0 -8px 32px rgba(0, 0, 0, 0.08));\r\n  z-index: var(--z-extension, 999999999);\r\n  padding: var(--spacing-lg, 16px) var(--spacing-2xl, 24px);\r\n  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);\r\n  font-size: var(--font-size-md, 16px);\r\n  color: var(--text-primary, #212529);\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.ln-footer-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  max-width: 1600px;\r\n  margin: 0 auto;\r\n  gap: var(--spacing-xl, 20px);\r\n}\r\n\r\n.ln-footer-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-md, 12px);\r\n  flex: 1;\r\n  width: 100%;\r\n}\r\n\r\n.ln-footer-right {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-lg, 16px);\r\n  flex-shrink: 0;\r\n}\r\n\r\n.ln-metrics-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(9, 1fr);\r\n  gap: var(--spacing-lg, 16px);\r\n  align-items: start;\r\n}\r\n\r\n.ln-metric-column {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-sm, 8px);\r\n}\r\n\r\n.ln-metric {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  min-width: 0;\r\n}\r\n\r\n.ln-metric-label {\r\n  font-size: var(--font-size-xs, 11px);\r\n  color: var(--text-secondary, #6c757d);\r\n  font-weight: var(--font-weight-medium, 500);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n  line-height: 1;\r\n}\r\n\r\n.ln-metric-value {\r\n  font-weight: var(--font-weight-semibold, 600);\r\n  font-size: var(--font-size-md, 16px);\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  line-height: 1.2;\r\n}\r\n\r\n.ln-price {\r\n  color: var(--color-primary, #007bff);\r\n  font-weight: var(--font-weight-bold, 700);\r\n}\r\n\r\n.ln-cashflow.negative {\r\n  color: var(--color-danger, #dc3545);\r\n}\r\n\r\n.ln-cashflow.positive {\r\n  color: var(--color-success, #28a745);\r\n}\r\n\r\n.ln-phone {\r\n  color: var(--color-info, #17a2b8);\r\n  cursor: pointer;\r\n  text-decoration: underline;\r\n}\r\n\r\n.ln-phone:hover {\r\n  color: var(--color-primary, #007bff);\r\n}\r\n\r\n.ln-property-type-dropdown {\r\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\r\n  border: 1px solid var(--border-color, #ddd);\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-base, 14px);\r\n  background: var(--bg-primary, #ffffff);\r\n  color: var(--text-primary, #212529);\r\n  cursor: pointer;\r\n  min-width: 120px;\r\n}\r\n\r\n.ln-property-type-dropdown:focus {\r\n  outline: none;\r\n  border-color: var(--color-primary, #007bff);\r\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\r\n}\r\n\r\n.ln-export-button {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-sm, 8px);\r\n  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);\r\n  background: var(--color-primary, #007bff);\r\n  color: var(--text-white, #ffffff);\r\n  border: none;\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-base, 14px);\r\n  font-weight: var(--font-weight-medium, 500);\r\n  cursor: pointer;\r\n  transition: background-color var(--transition-fast, 150ms ease);\r\n}\r\n\r\n.ln-export-button:hover {\r\n  background: var(--color-primary-hover, #0056b3);\r\n}\r\n\r\n.ln-export-icon {\r\n  width: 16px;\r\n  height: 16px;\r\n  fill: currentColor;\r\n}\r\n\r\n.ln-discount-controls {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-sm, 8px);\r\n  margin-top: var(--spacing-sm, 8px);\r\n}\r\n\r\n.ln-discount-input {\r\n  width: 60px;\r\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\r\n  border: 1px solid var(--border-color, #ddd);\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-sm, 12px);\r\n  text-align: center;\r\n}\r\n\r\n.ln-discount-button {\r\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\r\n  background: var(--color-secondary, #6c757d);\r\n  color: var(--text-white, #ffffff);\r\n  border: none;\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-xs, 11px);\r\n  cursor: pointer;\r\n  transition: background-color var(--transition-fast, 150ms ease);\r\n}\r\n\r\n.ln-discount-button:hover {\r\n  background: var(--color-primary, #007bff);\r\n}\r\n\r\n.ln-discount-button.active {\r\n  background: var(--color-primary, #007bff);\r\n}\r\n\r\n@media (max-width: 1400px) {\r\n  .ln-metrics-grid {\r\n    grid-template-columns: repeat(6, 1fr);\r\n  }\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .ln-footer {\r\n    padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);\r\n  }\r\n  \r\n  .ln-footer-container {\r\n    flex-direction: column;\r\n    gap: var(--spacing-md, 12px);\r\n  }\r\n  \r\n  .ln-metrics-grid {\r\n    grid-template-columns: repeat(4, 1fr);\r\n  }\r\n  \r\n  .ln-footer-right {\r\n    width: 100%;\r\n    justify-content: flex-end;\r\n  }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .ln-metrics-grid {\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: var(--spacing-md, 12px);\r\n  }\r\n  \r\n  .ln-metric-value {\r\n    font-size: var(--font-size-base, 14px);\r\n  }\r\n}",dashboardApp:"/* Shared CSS custom properties - extracted from your existing styles */\r\n:root {\r\n  /* Colors */\r\n  --color-primary: #007bff;\r\n  --color-primary-hover: #0056b3;\r\n  --color-secondary: #6c757d;\r\n  --color-success: #28a745;\r\n  --color-warning: #ffc107;\r\n  --color-danger: #dc3545;\r\n  --color-info: #17a2b8;\r\n  \r\n  /* Backgrounds */\r\n  --bg-primary: #ffffff;\r\n  --bg-secondary: #f8f9fa;\r\n  --bg-light: #ededed;\r\n  --bg-dark: #343a40;\r\n  \r\n  /* Text Colors */\r\n  --text-primary: #212529;\r\n  --text-secondary: #6c757d;\r\n  --text-muted: #495057;\r\n  --text-white: #ffffff;\r\n  \r\n  /* Borders */\r\n  --border-color: #ddd;\r\n  --border-color-light: #e9ecef;\r\n  --border-color-dark: #919090ff;\r\n  \r\n  /* Spacing */\r\n  --spacing-xs: 4px;\r\n  --spacing-sm: 8px;\r\n  --spacing-md: 12px;\r\n  --spacing-lg: 16px;\r\n  --spacing-xl: 20px;\r\n  --spacing-2xl: 24px;\r\n  --spacing-3xl: 32px;\r\n  \r\n  /* Typography */\r\n  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\r\n  --font-size-xs: 11px;\r\n  --font-size-sm: 12px;\r\n  --font-size-base: 14px;\r\n  --font-size-md: 16px;\r\n  --font-size-lg: 18px;\r\n  --font-size-xl: 20px;\r\n  --font-weight-normal: 400;\r\n  --font-weight-medium: 500;\r\n  --font-weight-semibold: 600;\r\n  --font-weight-bold: 700;\r\n  \r\n  /* Border Radius */\r\n  --border-radius-sm: 4px;\r\n  --border-radius-md: 6px;\r\n  --border-radius-lg: 8px;\r\n  --border-radius-xl: 12px;\r\n  \r\n  /* Shadows */\r\n  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\r\n  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n  --shadow-lg: 0 -8px 32px rgba(0, 0, 0, 0.08);\r\n  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);\r\n  \r\n  /* Z-index */\r\n  --z-extension: 999999999;\r\n  --z-modal: 1050;\r\n  --z-dropdown: 1000;\r\n  \r\n  /* Transitions */\r\n  --transition-fast: 150ms ease;\r\n  --transition-base: 250ms ease;\r\n  --transition-slow: 350ms ease;\r\n}/* Dashboard styles - extracted from existing dashboard CSS AS-IS */\r\n\r\n/* Base dashboard styles */\r\n.dashboard-container {\r\n  min-height: 100vh;\r\n  background: var(--bg-secondary, #f8f9fa);\r\n  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);\r\n  color: var(--text-primary, #212529);\r\n}\r\n\r\n.header {\r\n  background: var(--bg-primary, white);\r\n  padding: var(--spacing-xl, 20px) var(--spacing-2xl, 24px);\r\n  border-bottom: 1px solid var(--border-color-light, #e9ecef);\r\n  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));\r\n}\r\n\r\n.header h1 {\r\n  color: var(--color-primary, #007bff);\r\n  margin-bottom: var(--spacing-xl, 20px);\r\n}\r\n\r\n.filters {\r\n  display: flex;\r\n  gap: var(--spacing-lg, 15px);\r\n  flex-wrap: wrap;\r\n  align-items: end;\r\n}\r\n\r\n.filter-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-xs, 5px);\r\n}\r\n\r\n.filter-group label {\r\n  font-size: var(--font-size-sm, 12px);\r\n  color: var(--text-secondary, #6c757d);\r\n  font-weight: var(--font-weight-medium, 500);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.filter-group input, .filter-group select {\r\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\r\n  border: 1px solid var(--border-color, #ddd);\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-base, 14px);\r\n  min-width: 120px;\r\n}\r\n\r\n.filter-group button {\r\n  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);\r\n  background: var(--color-primary, #007bff);\r\n  color: var(--text-white, white);\r\n  border: none;\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-base, 14px);\r\n  cursor: pointer;\r\n}\r\n\r\n.filter-group button:hover {\r\n  background: var(--color-primary-hover, #0056b3);\r\n}\r\n\r\n.stats {\r\n  display: flex;\r\n  gap: var(--spacing-xl, 20px);\r\n  margin-top: var(--spacing-xl, 20px);\r\n  font-size: var(--font-size-base, 14px);\r\n  color: var(--text-secondary, #6c757d);\r\n}\r\n\r\n.table-container {\r\n  background: var(--bg-primary, white);\r\n  border-radius: var(--border-radius-lg, 8px);\r\n  box-shadow: var(--shadow-base, 0 2px 4px rgba(0,0,0,0.1));\r\n  overflow: hidden;\r\n}\r\n\r\ntable {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n}\r\n\r\nth, td {\r\n  padding: var(--spacing-lg, 15px) var(--spacing-md, 12px);\r\n  text-align: left;\r\n  border-bottom: 1px solid var(--border-color-light, #e9ecef);\r\n}\r\n\r\nth {\r\n  background: var(--bg-secondary, #f8f9fa);\r\n  font-weight: var(--font-weight-semibold, 600);\r\n  color: var(--text-muted, #495057);\r\n  font-size: var(--font-size-sm, 12px);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\nth a {\r\n  color: var(--text-muted, #495057);\r\n  text-decoration: none;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-xs, 4px);\r\n}\r\n\r\nth a:hover {\r\n  color: var(--color-primary, #007bff);\r\n}\r\n\r\nth a.sort-active {\r\n  color: var(--color-primary, #007bff);\r\n  font-weight: var(--font-weight-bold, 700);\r\n}\r\n\r\ntr:hover {\r\n  background: var(--bg-secondary, #f8f9fa);\r\n}\r\n\r\n.property-link {\r\n  color: var(--color-primary, #007bff);\r\n  text-decoration: none;\r\n  font-weight: var(--font-weight-medium, 500);\r\n}\r\n\r\n.property-link:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.contract-state {\r\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\r\n  border-radius: var(--border-radius-xl, 12px);\r\n  font-size: var(--font-size-xs, 11px);\r\n  font-weight: var(--font-weight-semibold, 600);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.contract-none { \r\n  background: var(--border-color-light, #e9ecef); \r\n  color: var(--text-muted, #495057); \r\n}\r\n\r\n.contract-loi_sent { \r\n  background: #fff3cd; \r\n  color: #856404; \r\n}\r\n\r\n.contract-loi_agreed { \r\n  background: #d4edda; \r\n  color: #155724; \r\n}\r\n\r\n.contract-loi_rejected { \r\n  background: #f8d7da; \r\n  color: #721c24; \r\n}\r\n\r\n.contract-contract_signed { \r\n  background: #d1ecf1; \r\n  color: #0c5460; \r\n}\r\n\r\n.contract-closed { \r\n  background: #d4edda; \r\n  color: #155724; \r\n}\r\n\r\n.contract-not_interested { \r\n  background: #f8d7da; \r\n  color: #721c24; \r\n}\r\n\r\n.date-cell {\r\n  font-size: var(--font-size-sm, 13px);\r\n  color: var(--text-secondary, #6c757d);\r\n}\r\n\r\n.pagination {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: var(--spacing-sm, 8px);\r\n  margin-top: var(--spacing-xl, 20px);\r\n  padding: var(--spacing-xl, 20px);\r\n}\r\n\r\n.page-link {\r\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\r\n  background: var(--bg-primary, white);\r\n  border: 1px solid var(--border-color, #ddd);\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  color: var(--text-primary, #212529);\r\n  text-decoration: none;\r\n  transition: all var(--transition-fast, 150ms ease);\r\n}\r\n\r\n.page-link:hover {\r\n  background: var(--color-primary, #007bff);\r\n  color: var(--text-white, white);\r\n  border-color: var(--color-primary, #007bff);\r\n}\r\n\r\n.page-link.active {\r\n  background: var(--color-primary, #007bff);\r\n  color: var(--text-white, white);\r\n  border-color: var(--color-primary, #007bff);\r\n}"};function injectStyles(r,n="injected-styles"){if("undefined"==typeof document)return null;const o=document.getElementById(n);o&&o.remove();const a=document.createElement("style");return a.id=n,a.textContent=r,document.head.appendChild(a),a}function injectFooterStyles(){return injectStyles(r.extension,"ln-footer-styles")}function injectDashboardStyles(){return injectStyles(r.dashboardApp,"dashboard-styles")}export{injectDashboardStyles,injectFooterStyles,injectStyles,r as styles};
+//# sourceMappingURL=browser.js.map

package/dist/styles/browser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser.js","sources":["../../src/styles/browser.js"],"sourcesContent":["// Auto-generated browser styles - DO NOT EDIT\n// Generated from CSS files by build-styles.js\n\nexport const styles = {\n  variables: \"/* Shared CSS custom properties - extracted from your existing styles */\\r\\n:root {\\r\\n  /* Colors */\\r\\n  --color-primary: #007bff;\\r\\n  --color-primary-hover: #0056b3;\\r\\n  --color-secondary: #6c757d;\\r\\n  --color-success: #28a745;\\r\\n  --color-warning: #ffc107;\\r\\n  --color-danger: #dc3545;\\r\\n  --color-info: #17a2b8;\\r\\n  \\r\\n  /* Backgrounds */\\r\\n  --bg-primary: #ffffff;\\r\\n  --bg-secondary: #f8f9fa;\\r\\n  --bg-light: #ededed;\\r\\n  --bg-dark: #343a40;\\r\\n  \\r\\n  /* Text Colors */\\r\\n  --text-primary: #212529;\\r\\n  --text-secondary: #6c757d;\\r\\n  --text-muted: #495057;\\r\\n  --text-white: #ffffff;\\r\\n  \\r\\n  /* Borders */\\r\\n  --border-color: #ddd;\\r\\n  --border-color-light: #e9ecef;\\r\\n  --border-color-dark: #919090ff;\\r\\n  \\r\\n  /* Spacing */\\r\\n  --spacing-xs: 4px;\\r\\n  --spacing-sm: 8px;\\r\\n  --spacing-md: 12px;\\r\\n  --spacing-lg: 16px;\\r\\n  --spacing-xl: 20px;\\r\\n  --spacing-2xl: 24px;\\r\\n  --spacing-3xl: 32px;\\r\\n  \\r\\n  /* Typography */\\r\\n  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\\r\\n  --font-size-xs: 11px;\\r\\n  --font-size-sm: 12px;\\r\\n  --font-size-base: 14px;\\r\\n  --font-size-md: 16px;\\r\\n  --font-size-lg: 18px;\\r\\n  --font-size-xl: 20px;\\r\\n  --font-weight-normal: 400;\\r\\n  --font-weight-medium: 500;\\r\\n  --font-weight-semibold: 600;\\r\\n  --font-weight-bold: 700;\\r\\n  \\r\\n  /* Border Radius */\\r\\n  --border-radius-sm: 4px;\\r\\n  --border-radius-md: 6px;\\r\\n  --border-radius-lg: 8px;\\r\\n  --border-radius-xl: 12px;\\r\\n  \\r\\n  /* Shadows */\\r\\n  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\\r\\n  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);\\r\\n  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\\r\\n  --shadow-lg: 0 -8px 32px rgba(0, 0, 0, 0.08);\\r\\n  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);\\r\\n  \\r\\n  /* Z-index */\\r\\n  --z-extension: 999999999;\\r\\n  --z-modal: 1050;\\r\\n  --z-dropdown: 1000;\\r\\n  \\r\\n  /* Transitions */\\r\\n  --transition-fast: 150ms ease;\\r\\n  --transition-base: 250ms ease;\\r\\n  --transition-slow: 350ms ease;\\r\\n}\",\n  footer: \"/* LoopNet Extension Footer - Extracted from content.js AS-IS */\\r\\n.ln-footer {\\r\\n  position: fixed;\\r\\n  bottom: 0;\\r\\n  left: 0;\\r\\n  right: 0;\\r\\n  background: var(--bg-light, #ededed);\\r\\n  border-top: 1px solid var(--border-color-dark, #919090ff);\\r\\n  box-shadow: var(--shadow-lg, 0 -8px 32px rgba(0, 0, 0, 0.08));\\r\\n  z-index: var(--z-extension, 999999999);\\r\\n  padding: var(--spacing-lg, 16px) var(--spacing-2xl, 24px);\\r\\n  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);\\r\\n  font-size: var(--font-size-md, 16px);\\r\\n  color: var(--text-primary, #212529);\\r\\n  width: 100%;\\r\\n  box-sizing: border-box;\\r\\n}\\r\\n\\r\\n.ln-footer-container {\\r\\n  display: flex;\\r\\n  align-items: center;\\r\\n  justify-content: space-between;\\r\\n  max-width: 1600px;\\r\\n  margin: 0 auto;\\r\\n  gap: var(--spacing-xl, 20px);\\r\\n}\\r\\n\\r\\n.ln-footer-content {\\r\\n  display: flex;\\r\\n  flex-direction: column;\\r\\n  gap: var(--spacing-md, 12px);\\r\\n  flex: 1;\\r\\n  width: 100%;\\r\\n}\\r\\n\\r\\n.ln-footer-right {\\r\\n  display: flex;\\r\\n  align-items: center;\\r\\n  gap: var(--spacing-lg, 16px);\\r\\n  flex-shrink: 0;\\r\\n}\\r\\n\\r\\n.ln-metrics-grid {\\r\\n  display: grid;\\r\\n  grid-template-columns: repeat(9, 1fr);\\r\\n  gap: var(--spacing-lg, 16px);\\r\\n  align-items: start;\\r\\n}\\r\\n\\r\\n.ln-metric-column {\\r\\n  display: flex;\\r\\n  flex-direction: column;\\r\\n  gap: var(--spacing-sm, 8px);\\r\\n}\\r\\n\\r\\n.ln-metric {\\r\\n  display: flex;\\r\\n  flex-direction: column;\\r\\n  gap: 2px;\\r\\n  min-width: 0;\\r\\n}\\r\\n\\r\\n.ln-metric-label {\\r\\n  font-size: var(--font-size-xs, 11px);\\r\\n  color: var(--text-secondary, #6c757d);\\r\\n  font-weight: var(--font-weight-medium, 500);\\r\\n  text-transform: uppercase;\\r\\n  letter-spacing: 0.5px;\\r\\n  line-height: 1;\\r\\n}\\r\\n\\r\\n.ln-metric-value {\\r\\n  font-weight: var(--font-weight-semibold, 600);\\r\\n  font-size: var(--font-size-md, 16px);\\r\\n  white-space: nowrap;\\r\\n  overflow: hidden;\\r\\n  text-overflow: ellipsis;\\r\\n  line-height: 1.2;\\r\\n}\\r\\n\\r\\n.ln-price {\\r\\n  color: var(--color-primary, #007bff);\\r\\n  font-weight: var(--font-weight-bold, 700);\\r\\n}\\r\\n\\r\\n.ln-cashflow.negative {\\r\\n  color: var(--color-danger, #dc3545);\\r\\n}\\r\\n\\r\\n.ln-cashflow.positive {\\r\\n  color: var(--color-success, #28a745);\\r\\n}\\r\\n\\r\\n.ln-phone {\\r\\n  color: var(--color-info, #17a2b8);\\r\\n  cursor: pointer;\\r\\n  text-decoration: underline;\\r\\n}\\r\\n\\r\\n.ln-phone:hover {\\r\\n  color: var(--color-primary, #007bff);\\r\\n}\\r\\n\\r\\n.ln-property-type-dropdown {\\r\\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\\r\\n  border: 1px solid var(--border-color, #ddd);\\r\\n  border-radius: var(--border-radius-sm, 4px);\\r\\n  font-size: var(--font-size-base, 14px);\\r\\n  background: var(--bg-primary, #ffffff);\\r\\n  color: var(--text-primary, #212529);\\r\\n  cursor: pointer;\\r\\n  min-width: 120px;\\r\\n}\\r\\n\\r\\n.ln-property-type-dropdown:focus {\\r\\n  outline: none;\\r\\n  border-color: var(--color-primary, #007bff);\\r\\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\\r\\n}\\r\\n\\r\\n.ln-export-button {\\r\\n  display: flex;\\r\\n  align-items: center;\\r\\n  gap: var(--spacing-sm, 8px);\\r\\n  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);\\r\\n  background: var(--color-primary, #007bff);\\r\\n  color: var(--text-white, #ffffff);\\r\\n  border: none;\\r\\n  border-radius: var(--border-radius-sm, 4px);\\r\\n  font-size: var(--font-size-base, 14px);\\r\\n  font-weight: var(--font-weight-medium, 500);\\r\\n  cursor: pointer;\\r\\n  transition: background-color var(--transition-fast, 150ms ease);\\r\\n}\\r\\n\\r\\n.ln-export-button:hover {\\r\\n  background: var(--color-primary-hover, #0056b3);\\r\\n}\\r\\n\\r\\n.ln-export-icon {\\r\\n  width: 16px;\\r\\n  height: 16px;\\r\\n  fill: currentColor;\\r\\n}\\r\\n\\r\\n.ln-discount-controls {\\r\\n  display: flex;\\r\\n  align-items: center;\\r\\n  gap: var(--spacing-sm, 8px);\\r\\n  margin-top: var(--spacing-sm, 8px);\\r\\n}\\r\\n\\r\\n.ln-discount-input {\\r\\n  width: 60px;\\r\\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\\r\\n  border: 1px solid var(--border-color, #ddd);\\r\\n  border-radius: var(--border-radius-sm, 4px);\\r\\n  font-size: var(--font-size-sm, 12px);\\r\\n  text-align: center;\\r\\n}\\r\\n\\r\\n.ln-discount-button {\\r\\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\\r\\n  background: var(--color-secondary, #6c757d);\\r\\n  color: var(--text-white, #ffffff);\\r\\n  border: none;\\r\\n  border-radius: var(--border-radius-sm, 4px);\\r\\n  font-size: var(--font-size-xs, 11px);\\r\\n  cursor: pointer;\\r\\n  transition: background-color var(--transition-fast, 150ms ease);\\r\\n}\\r\\n\\r\\n.ln-discount-button:hover {\\r\\n  background: var(--color-primary, #007bff);\\r\\n}\\r\\n\\r\\n.ln-discount-button.active {\\r\\n  background: var(--color-primary, #007bff);\\r\\n}\\r\\n\\r\\n@media (max-width: 1400px) {\\r\\n  .ln-metrics-grid {\\r\\n    grid-template-columns: repeat(6, 1fr);\\r\\n  }\\r\\n}\\r\\n\\r\\n@media (max-width: 1024px) {\\r\\n  .ln-footer {\\r\\n    padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);\\r\\n  }\\r\\n  \\r\\n  .ln-footer-container {\\r\\n    flex-direction: column;\\r\\n    gap: var(--spacing-md, 12px);\\r\\n  }\\r\\n  \\r\\n  .ln-metrics-grid {\\r\\n    grid-template-columns: repeat(4, 1fr);\\r\\n  }\\r\\n  \\r\\n  .ln-footer-right {\\r\\n    width: 100%;\\r\\n    justify-content: flex-end;\\r\\n  }\\r\\n}\\r\\n\\r\\n@media (max-width: 768px) {\\r\\n  .ln-metrics-grid {\\r\\n    grid-template-columns: repeat(3, 1fr);\\r\\n    gap: var(--spacing-md, 12px);\\r\\n  }\\r\\n  \\r\\n  .ln-metric-value {\\r\\n    font-size: var(--font-size-base, 14px);\\r\\n  }\\r\\n}\",\n  dashboard: \"/* Dashboard styles - extracted from existing dashboard CSS AS-IS */\\r\\n\\r\\n/* Base dashboard styles */\\r\\n.dashboard-container {\\r\\n  min-height: 100vh;\\r\\n  background: var(--bg-secondary, #f8f9fa);\\r\\n  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);\\r\\n  color: var(--text-primary, #212529);\\r\\n}\\r\\n\\r\\n.header {\\r\\n  background: var(--bg-primary, white);\\r\\n  padding: var(--spacing-xl, 20px) var(--spacing-2xl, 24px);\\r\\n  border-bottom: 1px solid var(--border-color-light, #e9ecef);\\r\\n  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));\\r\\n}\\r\\n\\r\\n.header h1 {\\r\\n  color: var(--color-primary, #007bff);\\r\\n  margin-bottom: var(--spacing-xl, 20px);\\r\\n}\\r\\n\\r\\n.filters {\\r\\n  display: flex;\\r\\n  gap: var(--spacing-lg, 15px);\\r\\n  flex-wrap: wrap;\\r\\n  align-items: end;\\r\\n}\\r\\n\\r\\n.filter-group {\\r\\n  display: flex;\\r\\n  flex-direction: column;\\r\\n  gap: var(--spacing-xs, 5px);\\r\\n}\\r\\n\\r\\n.filter-group label {\\r\\n  font-size: var(--font-size-sm, 12px);\\r\\n  color: var(--text-secondary, #6c757d);\\r\\n  font-weight: var(--font-weight-medium, 500);\\r\\n  text-transform: uppercase;\\r\\n  letter-spacing: 0.5px;\\r\\n}\\r\\n\\r\\n.filter-group input, .filter-group select {\\r\\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\\r\\n  border: 1px solid var(--border-color, #ddd);\\r\\n  border-radius: var(--border-radius-sm, 4px);\\r\\n  font-size: var(--font-size-base, 14px);\\r\\n  min-width: 120px;\\r\\n}\\r\\n\\r\\n.filter-group button {\\r\\n  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);\\r\\n  background: var(--color-primary, #007bff);\\r\\n  color: var(--text-white, white);\\r\\n  border: none;\\r\\n  border-radius: var(--border-radius-sm, 4px);\\r\\n  font-size: var(--font-size-base, 14px);\\r\\n  cursor: pointer;\\r\\n}\\r\\n\\r\\n.filter-group button:hover {\\r\\n  background: var(--color-primary-hover, #0056b3);\\r\\n}\\r\\n\\r\\n.stats {\\r\\n  display: flex;\\r\\n  gap: var(--spacing-xl, 20px);\\r\\n  margin-top: var(--spacing-xl, 20px);\\r\\n  font-size: var(--font-size-base, 14px);\\r\\n  color: var(--text-secondary, #6c757d);\\r\\n}\\r\\n\\r\\n.table-container {\\r\\n  background: var(--bg-primary, white);\\r\\n  border-radius: var(--border-radius-lg, 8px);\\r\\n  box-shadow: var(--shadow-base, 0 2px 4px rgba(0,0,0,0.1));\\r\\n  overflow: hidden;\\r\\n}\\r\\n\\r\\ntable {\\r\\n  width: 100%;\\r\\n  border-collapse: collapse;\\r\\n}\\r\\n\\r\\nth, td {\\r\\n  padding: var(--spacing-lg, 15px) var(--spacing-md, 12px);\\r\\n  text-align: left;\\r\\n  border-bottom: 1px solid var(--border-color-light, #e9ecef);\\r\\n}\\r\\n\\r\\nth {\\r\\n  background: var(--bg-secondary, #f8f9fa);\\r\\n  font-weight: var(--font-weight-semibold, 600);\\r\\n  color: var(--text-muted, #495057);\\r\\n  font-size: var(--font-size-sm, 12px);\\r\\n  text-transform: uppercase;\\r\\n  letter-spacing: 0.5px;\\r\\n}\\r\\n\\r\\nth a {\\r\\n  color: var(--text-muted, #495057);\\r\\n  text-decoration: none;\\r\\n  display: flex;\\r\\n  align-items: center;\\r\\n  gap: var(--spacing-xs, 4px);\\r\\n}\\r\\n\\r\\nth a:hover {\\r\\n  color: var(--color-primary, #007bff);\\r\\n}\\r\\n\\r\\nth a.sort-active {\\r\\n  color: var(--color-primary, #007bff);\\r\\n  font-weight: var(--font-weight-bold, 700);\\r\\n}\\r\\n\\r\\ntr:hover {\\r\\n  background: var(--bg-secondary, #f8f9fa);\\r\\n}\\r\\n\\r\\n.property-link {\\r\\n  color: var(--color-primary, #007bff);\\r\\n  text-decoration: none;\\r\\n  font-weight: var(--font-weight-medium, 500);\\r\\n}\\r\\n\\r\\n.property-link:hover {\\r\\n  text-decoration: underline;\\r\\n}\\r\\n\\r\\n.contract-state {\\r\\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\\r\\n  border-radius: var(--border-radius-xl, 12px);\\r\\n  font-size: var(--font-size-xs, 11px);\\r\\n  font-weight: var(--font-weight-semibold, 600);\\r\\n  text-transform: uppercase;\\r\\n  letter-spacing: 0.5px;\\r\\n}\\r\\n\\r\\n.contract-none { \\r\\n  background: var(--border-color-light, #e9ecef); \\r\\n  color: var(--text-muted, #495057); \\r\\n}\\r\\n\\r\\n.contract-loi_sent { \\r\\n  background: #fff3cd; \\r\\n  color: #856404; \\r\\n}\\r\\n\\r\\n.contract-loi_agreed { \\r\\n  background: #d4edda; \\r\\n  color: #155724; \\r\\n}\\r\\n\\r\\n.contract-loi_rejected { \\r\\n  background: #f8d7da; \\r\\n  color: #721c24; \\r\\n}\\r\\n\\r\\n.contract-contract_signed { \\r\\n  background: #d1ecf1; \\r\\n  color: #0c5460; \\r\\n}\\r\\n\\r\\n.contract-closed { \\r\\n  background: #d4edda; \\r\\n  color: #155724; \\r\\n}\\r\\n\\r\\n.contract-not_interested { \\r\\n  background: #f8d7da; \\r\\n  color: #721c24; \\r\\n}\\r\\n\\r\\n.date-cell {\\r\\n  font-size: var(--font-size-sm, 13px);\\r\\n  color: var(--text-secondary, #6c757d);\\r\\n}\\r\\n\\r\\n.pagination {\\r\\n  display: flex;\\r\\n  justify-content: center;\\r\\n  gap: var(--spacing-sm, 8px);\\r\\n  margin-top: var(--spacing-xl, 20px);\\r\\n  padding: var(--spacing-xl, 20px);\\r\\n}\\r\\n\\r\\n.page-link {\\r\\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\\r\\n  background: var(--bg-primary, white);\\r\\n  border: 1px solid var(--border-color, #ddd);\\r\\n  border-radius: var(--border-radius-sm, 4px);\\r\\n  color: var(--text-primary, #212529);\\r\\n  text-decoration: none;\\r\\n  transition: all var(--transition-fast, 150ms ease);\\r\\n}\\r\\n\\r\\n.page-link:hover {\\r\\n  background: var(--color-primary, #007bff);\\r\\n  color: var(--text-white, white);\\r\\n  border-color: var(--color-primary, #007bff);\\r\\n}\\r\\n\\r\\n.page-link.active {\\r\\n  background: var(--color-primary, #007bff);\\r\\n  color: var(--text-white, white);\\r\\n  border-color: var(--color-primary, #007bff);\\r\\n}\",\n  \n  // Combined styles\n  extension: \"/* Shared CSS custom properties - extracted from your existing styles */\\r\\n:root {\\r\\n  /* Colors */\\r\\n  --color-primary: #007bff;\\r\\n  --color-primary-hover: #0056b3;\\r\\n  --color-secondary: #6c757d;\\r\\n  --color-success: #28a745;\\r\\n  --color-warning: #ffc107;\\r\\n  --color-danger: #dc3545;\\r\\n  --color-info: #17a2b8;\\r\\n  \\r\\n  /* Backgrounds */\\r\\n  --bg-primary: #ffffff;\\r\\n  --bg-secondary: #f8f9fa;\\r\\n  --bg-light: #ededed;\\r\\n  --bg-dark: #343a40;\\r\\n  \\r\\n  /* Text Colors */\\r\\n  --text-primary: #212529;\\r\\n  --text-secondary: #6c757d;\\r\\n  --text-muted: #495057;\\r\\n  --text-white: #ffffff;\\r\\n  \\r\\n  /* Borders */\\r\\n  --border-color: #ddd;\\r\\n  --border-color-light: #e9ecef;\\r\\n  --border-color-dark: #919090ff;\\r\\n  \\r\\n  /* Spacing */\\r\\n  --spacing-xs: 4px;\\r\\n  --spacing-sm: 8px;\\r\\n  --spacing-md: 12px;\\r\\n  --spacing-lg: 16px;\\r\\n  --spacing-xl: 20px;\\r\\n  --spacing-2xl: 24px;\\r\\n  --spacing-3xl: 32px;\\r\\n  \\r\\n  /* Typography */\\r\\n  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\\r\\n  --font-size-xs: 11px;\\r\\n  --font-size-sm: 12px;\\r\\n  --font-size-base: 14px;\\r\\n  --font-size-md: 16px;\\r\\n  --font-size-lg: 18px;\\r\\n  --font-size-xl: 20px;\\r\\n  --font-weight-normal: 400;\\r\\n  --font-weight-medium: 500;\\r\\n  --font-weight-semibold: 600;\\r\\n  --font-weight-bold: 700;\\r\\n  \\r\\n  /* Border Radius */\\r\\n  --border-radius-sm: 4px;\\r\\n  --border-radius-md: 6px;\\r\\n  --border-radius-lg: 8px;\\r\\n  --border-radius-xl: 12px;\\r\\n  \\r\\n  /* Shadows */\\r\\n  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\\r\\n  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);\\r\\n  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\\r\\n  --shadow-lg: 0 -8px 32px rgba(0, 0, 0, 0.08);\\r\\n  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);\\r\\n  \\r\\n  /* Z-index */\\r\\n  --z-extension: 999999999;\\r\\n  --z-modal: 1050;\\r\\n  --z-dropdown: 1000;\\r\\n  \\r\\n  /* Transitions */\\r\\n  --transition-fast: 150ms ease;\\r\\n  --transition-base: 250ms ease;\\r\\n  --transition-slow: 350ms ease;\\r\\n}/* LoopNet Extension Footer - Extracted from content.js AS-IS */\\r\\n.ln-footer {\\r\\n  position: fixed;\\r\\n  bottom: 0;\\r\\n  left: 0;\\r\\n  right: 0;\\r\\n  background: var(--bg-light, #ededed);\\r\\n  border-top: 1px solid var(--border-color-dark, #919090ff);\\r\\n  box-shadow: var(--shadow-lg, 0 -8px 32px rgba(0, 0, 0, 0.08));\\r\\n  z-index: var(--z-extension, 999999999);\\r\\n  padding: var(--spacing-lg, 16px) var(--spacing-2xl, 24px);\\r\\n  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);\\r\\n  font-size: var(--font-size-md, 16px);\\r\\n  color: var(--text-primary, #212529);\\r\\n  width: 100%;\\r\\n  box-sizing: border-box;\\r\\n}\\r\\n\\r\\n.ln-footer-container {\\r\\n  display: flex;\\r\\n  align-items: center;\\r\\n  justify-content: space-between;\\r\\n  max-width: 1600px;\\r\\n  margin: 0 auto;\\r\\n  gap: var(--spacing-xl, 20px);\\r\\n}\\r\\n\\r\\n.ln-footer-content {\\r\\n  display: flex;\\r\\n  flex-direction: column;\\r\\n  gap: var(--spacing-md, 12px);\\r\\n  flex: 1;\\r\\n  width: 100%;\\r\\n}\\r\\n\\r\\n.ln-footer-right {\\r\\n  display: flex;\\r\\n  align-items: center;\\r\\n  gap: var(--spacing-lg, 16px);\\r\\n  flex-shrink: 0;\\r\\n}\\r\\n\\r\\n.ln-metrics-grid {\\r\\n  display: grid;\\r\\n  grid-template-columns: repeat(9, 1fr);\\r\\n  gap: var(--spacing-lg, 16px);\\r\\n  align-items: start;\\r\\n}\\r\\n\\r\\n.ln-metric-column {\\r\\n  display: flex;\\r\\n  flex-direction: column;\\r\\n  gap: var(--spacing-sm, 8px);\\r\\n}\\r\\n\\r\\n.ln-metric {\\r\\n  display: flex;\\r\\n  flex-direction: column;\\r\\n  gap: 2px;\\r\\n  min-width: 0;\\r\\n}\\r\\n\\r\\n.ln-metric-label {\\r\\n  font-size: var(--font-size-xs, 11px);\\r\\n  color: var(--text-secondary, #6c757d);\\r\\n  font-weight: var(--font-weight-medium, 500);\\r\\n  text-transform: uppercase;\\r\\n  letter-spacing: 0.5px;\\r\\n  line-height: 1;\\r\\n}\\r\\n\\r\\n.ln-metric-value {\\r\\n  font-weight: var(--font-weight-semibold, 600);\\r\\n  font-size: var(--font-size-md, 16px);\\r\\n  white-space: nowrap;\\r\\n  overflow: hidden;\\r\\n  text-overflow: ellipsis;\\r\\n  line-height: 1.2;\\r\\n}\\r\\n\\r\\n.ln-price {\\r\\n  color: var(--color-primary, #007bff);\\r\\n  font-weight: var(--font-weight-bold, 700);\\r\\n}\\r\\n\\r\\n.ln-cashflow.negative {\\r\\n  color: var(--color-danger, #dc3545);\\r\\n}\\r\\n\\r\\n.ln-cashflow.positive {\\r\\n  color: var(--color-success, #28a745);\\r\\n}\\r\\n\\r\\n.ln-phone {\\r\\n  color: var(--color-info, #17a2b8);\\r\\n  cursor: pointer;\\r\\n  text-decoration: underline;\\r\\n}\\r\\n\\r\\n.ln-phone:hover {\\r\\n  color: var(--color-primary, #007bff);\\r\\n}\\r\\n\\r\\n.ln-property-type-dropdown {\\r\\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\\r\\n  border: 1px solid var(--border-color, #ddd);\\r\\n  border-radius: var(--border-radius-sm, 4px);\\r\\n  font-size: var(--font-size-base, 14px);\\r\\n  background: var(--bg-primary, #ffffff);\\r\\n  color: var(--text-primary, #212529);\\r\\n  cursor: pointer;\\r\\n  min-width: 120px;\\r\\n}\\r\\n\\r\\n.ln-property-type-dropdown:focus {\\r\\n  outline: none;\\r\\n  border-color: var(--color-primary, #007bff);\\r\\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\\r\\n}\\r\\n\\r\\n.ln-export-button {\\r\\n  display: flex;\\r\\n  align-items: center;\\r\\n  gap: var(--spacing-sm, 8px);\\r\\n  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);\\r\\n  background: var(--color-primary, #007bff);\\r\\n  color: var(--text-white, #ffffff);\\r\\n  border: none;\\r\\n  border-radius: var(--border-radius-sm, 4px);\\r\\n  font-size: var(--font-size-base, 14px);\\r\\n  font-weight: var(--font-weight-medium, 500);\\r\\n  cursor: pointer;\\r\\n  transition: background-color var(--transition-fast, 150ms ease);\\r\\n}\\r\\n\\r\\n.ln-export-button:hover {\\r\\n  background: var(--color-primary-hover, #0056b3);\\r\\n}\\r\\n\\r\\n.ln-export-icon {\\r\\n  width: 16px;\\r\\n  height: 16px;\\r\\n  fill: currentColor;\\r\\n}\\r\\n\\r\\n.ln-discount-controls {\\r\\n  display: flex;\\r\\n  align-items: center;\\r\\n  gap: var(--spacing-sm, 8px);\\r\\n  margin-top: var(--spacing-sm, 8px);\\r\\n}\\r\\n\\r\\n.ln-discount-input {\\r\\n  width: 60px;\\r\\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\\r\\n  border: 1px solid var(--border-color, #ddd);\\r\\n  border-radius: var(--border-radius-sm, 4px);\\r\\n  font-size: var(--font-size-sm, 12px);\\r\\n  text-align: center;\\r\\n}\\r\\n\\r\\n.ln-discount-button {\\r\\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\\r\\n  background: var(--color-secondary, #6c757d);\\r\\n  color: var(--text-white, #ffffff);\\r\\n  border: none;\\r\\n  border-radius: var(--border-radius-sm, 4px);\\r\\n  font-size: var(--font-size-xs, 11px);\\r\\n  cursor: pointer;\\r\\n  transition: background-color var(--transition-fast, 150ms ease);\\r\\n}\\r\\n\\r\\n.ln-discount-button:hover {\\r\\n  background: var(--color-primary, #007bff);\\r\\n}\\r\\n\\r\\n.ln-discount-button.active {\\r\\n  background: var(--color-primary, #007bff);\\r\\n}\\r\\n\\r\\n@media (max-width: 1400px) {\\r\\n  .ln-metrics-grid {\\r\\n    grid-template-columns: repeat(6, 1fr);\\r\\n  }\\r\\n}\\r\\n\\r\\n@media (max-width: 1024px) {\\r\\n  .ln-footer {\\r\\n    padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);\\r\\n  }\\r\\n  \\r\\n  .ln-footer-container {\\r\\n    flex-direction: column;\\r\\n    gap: var(--spacing-md, 12px);\\r\\n  }\\r\\n  \\r\\n  .ln-metrics-grid {\\r\\n    grid-template-columns: repeat(4, 1fr);\\r\\n  }\\r\\n  \\r\\n  .ln-footer-right {\\r\\n    width: 100%;\\r\\n    justify-content: flex-end;\\r\\n  }\\r\\n}\\r\\n\\r\\n@media (max-width: 768px) {\\r\\n  .ln-metrics-grid {\\r\\n    grid-template-columns: repeat(3, 1fr);\\r\\n    gap: var(--spacing-md, 12px);\\r\\n  }\\r\\n  \\r\\n  .ln-metric-value {\\r\\n    font-size: var(--font-size-base, 14px);\\r\\n  }\\r\\n}\",\n  dashboardApp: \"/* Shared CSS custom properties - extracted from your existing styles */\\r\\n:root {\\r\\n  /* Colors */\\r\\n  --color-primary: #007bff;\\r\\n  --color-primary-hover: #0056b3;\\r\\n  --color-secondary: #6c757d;\\r\\n  --color-success: #28a745;\\r\\n  --color-warning: #ffc107;\\r\\n  --color-danger: #dc3545;\\r\\n  --color-info: #17a2b8;\\r\\n  \\r\\n  /* Backgrounds */\\r\\n  --bg-primary: #ffffff;\\r\\n  --bg-secondary: #f8f9fa;\\r\\n  --bg-light: #ededed;\\r\\n  --bg-dark: #343a40;\\r\\n  \\r\\n  /* Text Colors */\\r\\n  --text-primary: #212529;\\r\\n  --text-secondary: #6c757d;\\r\\n  --text-muted: #495057;\\r\\n  --text-white: #ffffff;\\r\\n  \\r\\n  /* Borders */\\r\\n  --border-color: #ddd;\\r\\n  --border-color-light: #e9ecef;\\r\\n  --border-color-dark: #919090ff;\\r\\n  \\r\\n  /* Spacing */\\r\\n  --spacing-xs: 4px;\\r\\n  --spacing-sm: 8px;\\r\\n  --spacing-md: 12px;\\r\\n  --spacing-lg: 16px;\\r\\n  --spacing-xl: 20px;\\r\\n  --spacing-2xl: 24px;\\r\\n  --spacing-3xl: 32px;\\r\\n  \\r\\n  /* Typography */\\r\\n  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\\r\\n  --font-size-xs: 11px;\\r\\n  --font-size-sm: 12px;\\r\\n  --font-size-base: 14px;\\r\\n  --font-size-md: 16px;\\r\\n  --font-size-lg: 18px;\\r\\n  --font-size-xl: 20px;\\r\\n  --font-weight-normal: 400;\\r\\n  --font-weight-medium: 500;\\r\\n  --font-weight-semibold: 600;\\r\\n  --font-weight-bold: 700;\\r\\n  \\r\\n  /* Border Radius */\\r\\n  --border-radius-sm: 4px;\\r\\n  --border-radius-md: 6px;\\r\\n  --border-radius-lg: 8px;\\r\\n  --border-radius-xl: 12px;\\r\\n  \\r\\n  /* Shadows */\\r\\n  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\\r\\n  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);\\r\\n  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\\r\\n  --shadow-lg: 0 -8px 32px rgba(0, 0, 0, 0.08);\\r\\n  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);\\r\\n  \\r\\n  /* Z-index */\\r\\n  --z-extension: 999999999;\\r\\n  --z-modal: 1050;\\r\\n  --z-dropdown: 1000;\\r\\n  \\r\\n  /* Transitions */\\r\\n  --transition-fast: 150ms ease;\\r\\n  --transition-base: 250ms ease;\\r\\n  --transition-slow: 350ms ease;\\r\\n}/* Dashboard styles - extracted from existing dashboard CSS AS-IS */\\r\\n\\r\\n/* Base dashboard styles */\\r\\n.dashboard-container {\\r\\n  min-height: 100vh;\\r\\n  background: var(--bg-secondary, #f8f9fa);\\r\\n  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);\\r\\n  color: var(--text-primary, #212529);\\r\\n}\\r\\n\\r\\n.header {\\r\\n  background: var(--bg-primary, white);\\r\\n  padding: var(--spacing-xl, 20px) var(--spacing-2xl, 24px);\\r\\n  border-bottom: 1px solid var(--border-color-light, #e9ecef);\\r\\n  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));\\r\\n}\\r\\n\\r\\n.header h1 {\\r\\n  color: var(--color-primary, #007bff);\\r\\n  margin-bottom: var(--spacing-xl, 20px);\\r\\n}\\r\\n\\r\\n.filters {\\r\\n  display: flex;\\r\\n  gap: var(--spacing-lg, 15px);\\r\\n  flex-wrap: wrap;\\r\\n  align-items: end;\\r\\n}\\r\\n\\r\\n.filter-group {\\r\\n  display: flex;\\r\\n  flex-direction: column;\\r\\n  gap: var(--spacing-xs, 5px);\\r\\n}\\r\\n\\r\\n.filter-group label {\\r\\n  font-size: var(--font-size-sm, 12px);\\r\\n  color: var(--text-secondary, #6c757d);\\r\\n  font-weight: var(--font-weight-medium, 500);\\r\\n  text-transform: uppercase;\\r\\n  letter-spacing: 0.5px;\\r\\n}\\r\\n\\r\\n.filter-group input, .filter-group select {\\r\\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\\r\\n  border: 1px solid var(--border-color, #ddd);\\r\\n  border-radius: var(--border-radius-sm, 4px);\\r\\n  font-size: var(--font-size-base, 14px);\\r\\n  min-width: 120px;\\r\\n}\\r\\n\\r\\n.filter-group button {\\r\\n  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);\\r\\n  background: var(--color-primary, #007bff);\\r\\n  color: var(--text-white, white);\\r\\n  border: none;\\r\\n  border-radius: var(--border-radius-sm, 4px);\\r\\n  font-size: var(--font-size-base, 14px);\\r\\n  cursor: pointer;\\r\\n}\\r\\n\\r\\n.filter-group button:hover {\\r\\n  background: var(--color-primary-hover, #0056b3);\\r\\n}\\r\\n\\r\\n.stats {\\r\\n  display: flex;\\r\\n  gap: var(--spacing-xl, 20px);\\r\\n  margin-top: var(--spacing-xl, 20px);\\r\\n  font-size: var(--font-size-base, 14px);\\r\\n  color: var(--text-secondary, #6c757d);\\r\\n}\\r\\n\\r\\n.table-container {\\r\\n  background: var(--bg-primary, white);\\r\\n  border-radius: var(--border-radius-lg, 8px);\\r\\n  box-shadow: var(--shadow-base, 0 2px 4px rgba(0,0,0,0.1));\\r\\n  overflow: hidden;\\r\\n}\\r\\n\\r\\ntable {\\r\\n  width: 100%;\\r\\n  border-collapse: collapse;\\r\\n}\\r\\n\\r\\nth, td {\\r\\n  padding: var(--spacing-lg, 15px) var(--spacing-md, 12px);\\r\\n  text-align: left;\\r\\n  border-bottom: 1px solid var(--border-color-light, #e9ecef);\\r\\n}\\r\\n\\r\\nth {\\r\\n  background: var(--bg-secondary, #f8f9fa);\\r\\n  font-weight: var(--font-weight-semibold, 600);\\r\\n  color: var(--text-muted, #495057);\\r\\n  font-size: var(--font-size-sm, 12px);\\r\\n  text-transform: uppercase;\\r\\n  letter-spacing: 0.5px;\\r\\n}\\r\\n\\r\\nth a {\\r\\n  color: var(--text-muted, #495057);\\r\\n  text-decoration: none;\\r\\n  display: flex;\\r\\n  align-items: center;\\r\\n  gap: var(--spacing-xs, 4px);\\r\\n}\\r\\n\\r\\nth a:hover {\\r\\n  color: var(--color-primary, #007bff);\\r\\n}\\r\\n\\r\\nth a.sort-active {\\r\\n  color: var(--color-primary, #007bff);\\r\\n  font-weight: var(--font-weight-bold, 700);\\r\\n}\\r\\n\\r\\ntr:hover {\\r\\n  background: var(--bg-secondary, #f8f9fa);\\r\\n}\\r\\n\\r\\n.property-link {\\r\\n  color: var(--color-primary, #007bff);\\r\\n  text-decoration: none;\\r\\n  font-weight: var(--font-weight-medium, 500);\\r\\n}\\r\\n\\r\\n.property-link:hover {\\r\\n  text-decoration: underline;\\r\\n}\\r\\n\\r\\n.contract-state {\\r\\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\\r\\n  border-radius: var(--border-radius-xl, 12px);\\r\\n  font-size: var(--font-size-xs, 11px);\\r\\n  font-weight: var(--font-weight-semibold, 600);\\r\\n  text-transform: uppercase;\\r\\n  letter-spacing: 0.5px;\\r\\n}\\r\\n\\r\\n.contract-none { \\r\\n  background: var(--border-color-light, #e9ecef); \\r\\n  color: var(--text-muted, #495057); \\r\\n}\\r\\n\\r\\n.contract-loi_sent { \\r\\n  background: #fff3cd; \\r\\n  color: #856404; \\r\\n}\\r\\n\\r\\n.contract-loi_agreed { \\r\\n  background: #d4edda; \\r\\n  color: #155724; \\r\\n}\\r\\n\\r\\n.contract-loi_rejected { \\r\\n  background: #f8d7da; \\r\\n  color: #721c24; \\r\\n}\\r\\n\\r\\n.contract-contract_signed { \\r\\n  background: #d1ecf1; \\r\\n  color: #0c5460; \\r\\n}\\r\\n\\r\\n.contract-closed { \\r\\n  background: #d4edda; \\r\\n  color: #155724; \\r\\n}\\r\\n\\r\\n.contract-not_interested { \\r\\n  background: #f8d7da; \\r\\n  color: #721c24; \\r\\n}\\r\\n\\r\\n.date-cell {\\r\\n  font-size: var(--font-size-sm, 13px);\\r\\n  color: var(--text-secondary, #6c757d);\\r\\n}\\r\\n\\r\\n.pagination {\\r\\n  display: flex;\\r\\n  justify-content: center;\\r\\n  gap: var(--spacing-sm, 8px);\\r\\n  margin-top: var(--spacing-xl, 20px);\\r\\n  padding: var(--spacing-xl, 20px);\\r\\n}\\r\\n\\r\\n.page-link {\\r\\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\\r\\n  background: var(--bg-primary, white);\\r\\n  border: 1px solid var(--border-color, #ddd);\\r\\n  border-radius: var(--border-radius-sm, 4px);\\r\\n  color: var(--text-primary, #212529);\\r\\n  text-decoration: none;\\r\\n  transition: all var(--transition-fast, 150ms ease);\\r\\n}\\r\\n\\r\\n.page-link:hover {\\r\\n  background: var(--color-primary, #007bff);\\r\\n  color: var(--text-white, white);\\r\\n  border-color: var(--color-primary, #007bff);\\r\\n}\\r\\n\\r\\n.page-link.active {\\r\\n  background: var(--color-primary, #007bff);\\r\\n  color: var(--text-white, white);\\r\\n  border-color: var(--color-primary, #007bff);\\r\\n}\"\n};\n\nexport function injectStyles(cssString, id = \"injected-styles\") {\n  if (typeof document === 'undefined') return null;\n  \n  const existing = document.getElementById(id);\n  if (existing) existing.remove();\n  \n  const style = document.createElement(\"style\");\n  style.id = id;\n  style.textContent = cssString;\n  document.head.appendChild(style);\n  \n  return style;\n}\n\nexport function injectFooterStyles() {\n  return injectStyles(styles.extension, \"ln-footer-styles\");\n}\n\nexport function injectDashboardStyles() {\n  return injectStyles(styles.dashboardApp, \"dashboard-styles\");\n}\n"],"names":["styles","variables","footer","dashboard","extension","dashboardApp","injectStyles","cssString","id","document","existing","getElementById","remove","style","createElement","textContent","head","appendChild","injectFooterStyles","injectDashboardStyles"],"mappings":"AAGY,MAACA,EAAS,CACpBC,UAAW,w+DACXC,OAAQ,u4KACRC,UAAW,2xKAGXC,UAAW,42OACXC,aAAc,iwOAGT,SAASC,aAAaC,EAAWC,EAAK,mBAC3C,GAAwB,oBAAbC,SAA0B,OAAO,KAE5C,MAAMC,EAAWD,SAASE,eAAeH,GACrCE,GAAUA,EAASE,SAEvB,MAAMC,EAAQJ,SAASK,cAAc,SAKrC,OAJAD,EAAML,GAAKA,EACXK,EAAME,YAAcR,EACpBE,SAASO,KAAKC,YAAYJ,GAEnBA,CACT,CAEO,SAASK,qBACd,OAAOZ,aAAaN,EAAOI,UAAW,mBACxC,CAEO,SAASe,wBACd,OAAOb,aAAaN,EAAOK,aAAc,mBAC3C"}

package/package.json

@@ -1,45 +1,47 @@
-{
-  "name": "@archerjessop/utilities",
-  "version": "3.5.0",
-  "description": "Shared utilities for ArcherJessop property analysis tools",
-  "type": "module",
-  "main": "dist/index.js",
-  "exports": {
-    ".": "./dist/index.js"
-  },
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "sideEffects": false,
-  "engines": {
-    "node": ">=16"
-  },
-  "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest --coverage",
-    "clean": "rm -rf dist",
-    "prepublishOnly": "npm run clean && npm run build && npm run test",
-    "lint": "eslint src tests",
-    "lint:fix": "eslint src tests --fix",
-    "release:patch": "npm version patch && git push && git push --tags && npm publish --access public",
-    "release:minor": "npm version minor && git push && git push --tags && npm publish --access public",
-    "release:major": "npm version major && git push && git push --tags && npm publish --access public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://gitlab.com/archerjessop/utilities.git"
-  },
-  "author": "ArcherJessop",
-  "license": "MIT",
-  "devDependencies": {
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "eslint": "^8.57.0",
-    "rollup": "^4.9.6",
-    "vitest": "^3.2.4"
-  }
-}
+{
+  "name": "@archerjessop/utilities",
+  "version": "3.6.0",
+  "description": "Shared utilities for ArcherJessop property analysis tools",
+  "type": "module",
+  "main": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=16"
+  },
+  "scripts": {
+    "build": "node build-styles.js && rollup -c",
+    "prebuild": "node build-styles.js",
+    "dev": "rollup -c -w",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest --coverage",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run build && npm run test",
+    "lint": "eslint src tests",
+    "lint:fix": "eslint src tests --fix",
+    "release:patch": "npm version patch && git push && git push --tags && npm publish --access public",
+    "release:minor": "npm version minor && git push && git push --tags && npm publish --access public",
+    "release:major": "npm version major && git push && git push --tags && npm publish --access public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/archerjessop/utilities.git"
+  },
+  "author": "ArcherJessop",
+  "license": "MIT",
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "eslint": "^8.57.0",
+    "rollup": "^4.9.6",
+    "vitest": "^3.2.4"
+  }
+}

package/src/styles/browser.js

@@ -0,0 +1,34 @@
+// Auto-generated browser styles - DO NOT EDIT
+// Generated from CSS files by build-styles.js
+
+export const styles = {
+  variables: "/* Shared CSS custom properties - extracted from your existing styles */\r\n:root {\r\n  /* Colors */\r\n  --color-primary: #007bff;\r\n  --color-primary-hover: #0056b3;\r\n  --color-secondary: #6c757d;\r\n  --color-success: #28a745;\r\n  --color-warning: #ffc107;\r\n  --color-danger: #dc3545;\r\n  --color-info: #17a2b8;\r\n  \r\n  /* Backgrounds */\r\n  --bg-primary: #ffffff;\r\n  --bg-secondary: #f8f9fa;\r\n  --bg-light: #ededed;\r\n  --bg-dark: #343a40;\r\n  \r\n  /* Text Colors */\r\n  --text-primary: #212529;\r\n  --text-secondary: #6c757d;\r\n  --text-muted: #495057;\r\n  --text-white: #ffffff;\r\n  \r\n  /* Borders */\r\n  --border-color: #ddd;\r\n  --border-color-light: #e9ecef;\r\n  --border-color-dark: #919090ff;\r\n  \r\n  /* Spacing */\r\n  --spacing-xs: 4px;\r\n  --spacing-sm: 8px;\r\n  --spacing-md: 12px;\r\n  --spacing-lg: 16px;\r\n  --spacing-xl: 20px;\r\n  --spacing-2xl: 24px;\r\n  --spacing-3xl: 32px;\r\n  \r\n  /* Typography */\r\n  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\r\n  --font-size-xs: 11px;\r\n  --font-size-sm: 12px;\r\n  --font-size-base: 14px;\r\n  --font-size-md: 16px;\r\n  --font-size-lg: 18px;\r\n  --font-size-xl: 20px;\r\n  --font-weight-normal: 400;\r\n  --font-weight-medium: 500;\r\n  --font-weight-semibold: 600;\r\n  --font-weight-bold: 700;\r\n  \r\n  /* Border Radius */\r\n  --border-radius-sm: 4px;\r\n  --border-radius-md: 6px;\r\n  --border-radius-lg: 8px;\r\n  --border-radius-xl: 12px;\r\n  \r\n  /* Shadows */\r\n  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\r\n  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n  --shadow-lg: 0 -8px 32px rgba(0, 0, 0, 0.08);\r\n  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);\r\n  \r\n  /* Z-index */\r\n  --z-extension: 999999999;\r\n  --z-modal: 1050;\r\n  --z-dropdown: 1000;\r\n  \r\n  /* Transitions */\r\n  --transition-fast: 150ms ease;\r\n  --transition-base: 250ms ease;\r\n  --transition-slow: 350ms ease;\r\n}",
+  footer: "/* LoopNet Extension Footer - Extracted from content.js AS-IS */\r\n.ln-footer {\r\n  position: fixed;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  background: var(--bg-light, #ededed);\r\n  border-top: 1px solid var(--border-color-dark, #919090ff);\r\n  box-shadow: var(--shadow-lg, 0 -8px 32px rgba(0, 0, 0, 0.08));\r\n  z-index: var(--z-extension, 999999999);\r\n  padding: var(--spacing-lg, 16px) var(--spacing-2xl, 24px);\r\n  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);\r\n  font-size: var(--font-size-md, 16px);\r\n  color: var(--text-primary, #212529);\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.ln-footer-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  max-width: 1600px;\r\n  margin: 0 auto;\r\n  gap: var(--spacing-xl, 20px);\r\n}\r\n\r\n.ln-footer-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-md, 12px);\r\n  flex: 1;\r\n  width: 100%;\r\n}\r\n\r\n.ln-footer-right {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-lg, 16px);\r\n  flex-shrink: 0;\r\n}\r\n\r\n.ln-metrics-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(9, 1fr);\r\n  gap: var(--spacing-lg, 16px);\r\n  align-items: start;\r\n}\r\n\r\n.ln-metric-column {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-sm, 8px);\r\n}\r\n\r\n.ln-metric {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  min-width: 0;\r\n}\r\n\r\n.ln-metric-label {\r\n  font-size: var(--font-size-xs, 11px);\r\n  color: var(--text-secondary, #6c757d);\r\n  font-weight: var(--font-weight-medium, 500);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n  line-height: 1;\r\n}\r\n\r\n.ln-metric-value {\r\n  font-weight: var(--font-weight-semibold, 600);\r\n  font-size: var(--font-size-md, 16px);\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  line-height: 1.2;\r\n}\r\n\r\n.ln-price {\r\n  color: var(--color-primary, #007bff);\r\n  font-weight: var(--font-weight-bold, 700);\r\n}\r\n\r\n.ln-cashflow.negative {\r\n  color: var(--color-danger, #dc3545);\r\n}\r\n\r\n.ln-cashflow.positive {\r\n  color: var(--color-success, #28a745);\r\n}\r\n\r\n.ln-phone {\r\n  color: var(--color-info, #17a2b8);\r\n  cursor: pointer;\r\n  text-decoration: underline;\r\n}\r\n\r\n.ln-phone:hover {\r\n  color: var(--color-primary, #007bff);\r\n}\r\n\r\n.ln-property-type-dropdown {\r\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\r\n  border: 1px solid var(--border-color, #ddd);\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-base, 14px);\r\n  background: var(--bg-primary, #ffffff);\r\n  color: var(--text-primary, #212529);\r\n  cursor: pointer;\r\n  min-width: 120px;\r\n}\r\n\r\n.ln-property-type-dropdown:focus {\r\n  outline: none;\r\n  border-color: var(--color-primary, #007bff);\r\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\r\n}\r\n\r\n.ln-export-button {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-sm, 8px);\r\n  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);\r\n  background: var(--color-primary, #007bff);\r\n  color: var(--text-white, #ffffff);\r\n  border: none;\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-base, 14px);\r\n  font-weight: var(--font-weight-medium, 500);\r\n  cursor: pointer;\r\n  transition: background-color var(--transition-fast, 150ms ease);\r\n}\r\n\r\n.ln-export-button:hover {\r\n  background: var(--color-primary-hover, #0056b3);\r\n}\r\n\r\n.ln-export-icon {\r\n  width: 16px;\r\n  height: 16px;\r\n  fill: currentColor;\r\n}\r\n\r\n.ln-discount-controls {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-sm, 8px);\r\n  margin-top: var(--spacing-sm, 8px);\r\n}\r\n\r\n.ln-discount-input {\r\n  width: 60px;\r\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\r\n  border: 1px solid var(--border-color, #ddd);\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-sm, 12px);\r\n  text-align: center;\r\n}\r\n\r\n.ln-discount-button {\r\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\r\n  background: var(--color-secondary, #6c757d);\r\n  color: var(--text-white, #ffffff);\r\n  border: none;\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-xs, 11px);\r\n  cursor: pointer;\r\n  transition: background-color var(--transition-fast, 150ms ease);\r\n}\r\n\r\n.ln-discount-button:hover {\r\n  background: var(--color-primary, #007bff);\r\n}\r\n\r\n.ln-discount-button.active {\r\n  background: var(--color-primary, #007bff);\r\n}\r\n\r\n@media (max-width: 1400px) {\r\n  .ln-metrics-grid {\r\n    grid-template-columns: repeat(6, 1fr);\r\n  }\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .ln-footer {\r\n    padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);\r\n  }\r\n  \r\n  .ln-footer-container {\r\n    flex-direction: column;\r\n    gap: var(--spacing-md, 12px);\r\n  }\r\n  \r\n  .ln-metrics-grid {\r\n    grid-template-columns: repeat(4, 1fr);\r\n  }\r\n  \r\n  .ln-footer-right {\r\n    width: 100%;\r\n    justify-content: flex-end;\r\n  }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .ln-metrics-grid {\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: var(--spacing-md, 12px);\r\n  }\r\n  \r\n  .ln-metric-value {\r\n    font-size: var(--font-size-base, 14px);\r\n  }\r\n}",
+  dashboard: "/* Dashboard styles - extracted from existing dashboard CSS AS-IS */\r\n\r\n/* Base dashboard styles */\r\n.dashboard-container {\r\n  min-height: 100vh;\r\n  background: var(--bg-secondary, #f8f9fa);\r\n  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);\r\n  color: var(--text-primary, #212529);\r\n}\r\n\r\n.header {\r\n  background: var(--bg-primary, white);\r\n  padding: var(--spacing-xl, 20px) var(--spacing-2xl, 24px);\r\n  border-bottom: 1px solid var(--border-color-light, #e9ecef);\r\n  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));\r\n}\r\n\r\n.header h1 {\r\n  color: var(--color-primary, #007bff);\r\n  margin-bottom: var(--spacing-xl, 20px);\r\n}\r\n\r\n.filters {\r\n  display: flex;\r\n  gap: var(--spacing-lg, 15px);\r\n  flex-wrap: wrap;\r\n  align-items: end;\r\n}\r\n\r\n.filter-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-xs, 5px);\r\n}\r\n\r\n.filter-group label {\r\n  font-size: var(--font-size-sm, 12px);\r\n  color: var(--text-secondary, #6c757d);\r\n  font-weight: var(--font-weight-medium, 500);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.filter-group input, .filter-group select {\r\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\r\n  border: 1px solid var(--border-color, #ddd);\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-base, 14px);\r\n  min-width: 120px;\r\n}\r\n\r\n.filter-group button {\r\n  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);\r\n  background: var(--color-primary, #007bff);\r\n  color: var(--text-white, white);\r\n  border: none;\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-base, 14px);\r\n  cursor: pointer;\r\n}\r\n\r\n.filter-group button:hover {\r\n  background: var(--color-primary-hover, #0056b3);\r\n}\r\n\r\n.stats {\r\n  display: flex;\r\n  gap: var(--spacing-xl, 20px);\r\n  margin-top: var(--spacing-xl, 20px);\r\n  font-size: var(--font-size-base, 14px);\r\n  color: var(--text-secondary, #6c757d);\r\n}\r\n\r\n.table-container {\r\n  background: var(--bg-primary, white);\r\n  border-radius: var(--border-radius-lg, 8px);\r\n  box-shadow: var(--shadow-base, 0 2px 4px rgba(0,0,0,0.1));\r\n  overflow: hidden;\r\n}\r\n\r\ntable {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n}\r\n\r\nth, td {\r\n  padding: var(--spacing-lg, 15px) var(--spacing-md, 12px);\r\n  text-align: left;\r\n  border-bottom: 1px solid var(--border-color-light, #e9ecef);\r\n}\r\n\r\nth {\r\n  background: var(--bg-secondary, #f8f9fa);\r\n  font-weight: var(--font-weight-semibold, 600);\r\n  color: var(--text-muted, #495057);\r\n  font-size: var(--font-size-sm, 12px);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\nth a {\r\n  color: var(--text-muted, #495057);\r\n  text-decoration: none;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-xs, 4px);\r\n}\r\n\r\nth a:hover {\r\n  color: var(--color-primary, #007bff);\r\n}\r\n\r\nth a.sort-active {\r\n  color: var(--color-primary, #007bff);\r\n  font-weight: var(--font-weight-bold, 700);\r\n}\r\n\r\ntr:hover {\r\n  background: var(--bg-secondary, #f8f9fa);\r\n}\r\n\r\n.property-link {\r\n  color: var(--color-primary, #007bff);\r\n  text-decoration: none;\r\n  font-weight: var(--font-weight-medium, 500);\r\n}\r\n\r\n.property-link:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.contract-state {\r\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\r\n  border-radius: var(--border-radius-xl, 12px);\r\n  font-size: var(--font-size-xs, 11px);\r\n  font-weight: var(--font-weight-semibold, 600);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.contract-none { \r\n  background: var(--border-color-light, #e9ecef); \r\n  color: var(--text-muted, #495057); \r\n}\r\n\r\n.contract-loi_sent { \r\n  background: #fff3cd; \r\n  color: #856404; \r\n}\r\n\r\n.contract-loi_agreed { \r\n  background: #d4edda; \r\n  color: #155724; \r\n}\r\n\r\n.contract-loi_rejected { \r\n  background: #f8d7da; \r\n  color: #721c24; \r\n}\r\n\r\n.contract-contract_signed { \r\n  background: #d1ecf1; \r\n  color: #0c5460; \r\n}\r\n\r\n.contract-closed { \r\n  background: #d4edda; \r\n  color: #155724; \r\n}\r\n\r\n.contract-not_interested { \r\n  background: #f8d7da; \r\n  color: #721c24; \r\n}\r\n\r\n.date-cell {\r\n  font-size: var(--font-size-sm, 13px);\r\n  color: var(--text-secondary, #6c757d);\r\n}\r\n\r\n.pagination {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: var(--spacing-sm, 8px);\r\n  margin-top: var(--spacing-xl, 20px);\r\n  padding: var(--spacing-xl, 20px);\r\n}\r\n\r\n.page-link {\r\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\r\n  background: var(--bg-primary, white);\r\n  border: 1px solid var(--border-color, #ddd);\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  color: var(--text-primary, #212529);\r\n  text-decoration: none;\r\n  transition: all var(--transition-fast, 150ms ease);\r\n}\r\n\r\n.page-link:hover {\r\n  background: var(--color-primary, #007bff);\r\n  color: var(--text-white, white);\r\n  border-color: var(--color-primary, #007bff);\r\n}\r\n\r\n.page-link.active {\r\n  background: var(--color-primary, #007bff);\r\n  color: var(--text-white, white);\r\n  border-color: var(--color-primary, #007bff);\r\n}",
+  
+  // Combined styles
+  extension: "/* Shared CSS custom properties - extracted from your existing styles */\r\n:root {\r\n  /* Colors */\r\n  --color-primary: #007bff;\r\n  --color-primary-hover: #0056b3;\r\n  --color-secondary: #6c757d;\r\n  --color-success: #28a745;\r\n  --color-warning: #ffc107;\r\n  --color-danger: #dc3545;\r\n  --color-info: #17a2b8;\r\n  \r\n  /* Backgrounds */\r\n  --bg-primary: #ffffff;\r\n  --bg-secondary: #f8f9fa;\r\n  --bg-light: #ededed;\r\n  --bg-dark: #343a40;\r\n  \r\n  /* Text Colors */\r\n  --text-primary: #212529;\r\n  --text-secondary: #6c757d;\r\n  --text-muted: #495057;\r\n  --text-white: #ffffff;\r\n  \r\n  /* Borders */\r\n  --border-color: #ddd;\r\n  --border-color-light: #e9ecef;\r\n  --border-color-dark: #919090ff;\r\n  \r\n  /* Spacing */\r\n  --spacing-xs: 4px;\r\n  --spacing-sm: 8px;\r\n  --spacing-md: 12px;\r\n  --spacing-lg: 16px;\r\n  --spacing-xl: 20px;\r\n  --spacing-2xl: 24px;\r\n  --spacing-3xl: 32px;\r\n  \r\n  /* Typography */\r\n  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\r\n  --font-size-xs: 11px;\r\n  --font-size-sm: 12px;\r\n  --font-size-base: 14px;\r\n  --font-size-md: 16px;\r\n  --font-size-lg: 18px;\r\n  --font-size-xl: 20px;\r\n  --font-weight-normal: 400;\r\n  --font-weight-medium: 500;\r\n  --font-weight-semibold: 600;\r\n  --font-weight-bold: 700;\r\n  \r\n  /* Border Radius */\r\n  --border-radius-sm: 4px;\r\n  --border-radius-md: 6px;\r\n  --border-radius-lg: 8px;\r\n  --border-radius-xl: 12px;\r\n  \r\n  /* Shadows */\r\n  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\r\n  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n  --shadow-lg: 0 -8px 32px rgba(0, 0, 0, 0.08);\r\n  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);\r\n  \r\n  /* Z-index */\r\n  --z-extension: 999999999;\r\n  --z-modal: 1050;\r\n  --z-dropdown: 1000;\r\n  \r\n  /* Transitions */\r\n  --transition-fast: 150ms ease;\r\n  --transition-base: 250ms ease;\r\n  --transition-slow: 350ms ease;\r\n}/* LoopNet Extension Footer - Extracted from content.js AS-IS */\r\n.ln-footer {\r\n  position: fixed;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  background: var(--bg-light, #ededed);\r\n  border-top: 1px solid var(--border-color-dark, #919090ff);\r\n  box-shadow: var(--shadow-lg, 0 -8px 32px rgba(0, 0, 0, 0.08));\r\n  z-index: var(--z-extension, 999999999);\r\n  padding: var(--spacing-lg, 16px) var(--spacing-2xl, 24px);\r\n  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);\r\n  font-size: var(--font-size-md, 16px);\r\n  color: var(--text-primary, #212529);\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.ln-footer-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  max-width: 1600px;\r\n  margin: 0 auto;\r\n  gap: var(--spacing-xl, 20px);\r\n}\r\n\r\n.ln-footer-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-md, 12px);\r\n  flex: 1;\r\n  width: 100%;\r\n}\r\n\r\n.ln-footer-right {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-lg, 16px);\r\n  flex-shrink: 0;\r\n}\r\n\r\n.ln-metrics-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(9, 1fr);\r\n  gap: var(--spacing-lg, 16px);\r\n  align-items: start;\r\n}\r\n\r\n.ln-metric-column {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-sm, 8px);\r\n}\r\n\r\n.ln-metric {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  min-width: 0;\r\n}\r\n\r\n.ln-metric-label {\r\n  font-size: var(--font-size-xs, 11px);\r\n  color: var(--text-secondary, #6c757d);\r\n  font-weight: var(--font-weight-medium, 500);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n  line-height: 1;\r\n}\r\n\r\n.ln-metric-value {\r\n  font-weight: var(--font-weight-semibold, 600);\r\n  font-size: var(--font-size-md, 16px);\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  line-height: 1.2;\r\n}\r\n\r\n.ln-price {\r\n  color: var(--color-primary, #007bff);\r\n  font-weight: var(--font-weight-bold, 700);\r\n}\r\n\r\n.ln-cashflow.negative {\r\n  color: var(--color-danger, #dc3545);\r\n}\r\n\r\n.ln-cashflow.positive {\r\n  color: var(--color-success, #28a745);\r\n}\r\n\r\n.ln-phone {\r\n  color: var(--color-info, #17a2b8);\r\n  cursor: pointer;\r\n  text-decoration: underline;\r\n}\r\n\r\n.ln-phone:hover {\r\n  color: var(--color-primary, #007bff);\r\n}\r\n\r\n.ln-property-type-dropdown {\r\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\r\n  border: 1px solid var(--border-color, #ddd);\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-base, 14px);\r\n  background: var(--bg-primary, #ffffff);\r\n  color: var(--text-primary, #212529);\r\n  cursor: pointer;\r\n  min-width: 120px;\r\n}\r\n\r\n.ln-property-type-dropdown:focus {\r\n  outline: none;\r\n  border-color: var(--color-primary, #007bff);\r\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\r\n}\r\n\r\n.ln-export-button {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-sm, 8px);\r\n  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);\r\n  background: var(--color-primary, #007bff);\r\n  color: var(--text-white, #ffffff);\r\n  border: none;\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-base, 14px);\r\n  font-weight: var(--font-weight-medium, 500);\r\n  cursor: pointer;\r\n  transition: background-color var(--transition-fast, 150ms ease);\r\n}\r\n\r\n.ln-export-button:hover {\r\n  background: var(--color-primary-hover, #0056b3);\r\n}\r\n\r\n.ln-export-icon {\r\n  width: 16px;\r\n  height: 16px;\r\n  fill: currentColor;\r\n}\r\n\r\n.ln-discount-controls {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-sm, 8px);\r\n  margin-top: var(--spacing-sm, 8px);\r\n}\r\n\r\n.ln-discount-input {\r\n  width: 60px;\r\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\r\n  border: 1px solid var(--border-color, #ddd);\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-sm, 12px);\r\n  text-align: center;\r\n}\r\n\r\n.ln-discount-button {\r\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\r\n  background: var(--color-secondary, #6c757d);\r\n  color: var(--text-white, #ffffff);\r\n  border: none;\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-xs, 11px);\r\n  cursor: pointer;\r\n  transition: background-color var(--transition-fast, 150ms ease);\r\n}\r\n\r\n.ln-discount-button:hover {\r\n  background: var(--color-primary, #007bff);\r\n}\r\n\r\n.ln-discount-button.active {\r\n  background: var(--color-primary, #007bff);\r\n}\r\n\r\n@media (max-width: 1400px) {\r\n  .ln-metrics-grid {\r\n    grid-template-columns: repeat(6, 1fr);\r\n  }\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .ln-footer {\r\n    padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);\r\n  }\r\n  \r\n  .ln-footer-container {\r\n    flex-direction: column;\r\n    gap: var(--spacing-md, 12px);\r\n  }\r\n  \r\n  .ln-metrics-grid {\r\n    grid-template-columns: repeat(4, 1fr);\r\n  }\r\n  \r\n  .ln-footer-right {\r\n    width: 100%;\r\n    justify-content: flex-end;\r\n  }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .ln-metrics-grid {\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: var(--spacing-md, 12px);\r\n  }\r\n  \r\n  .ln-metric-value {\r\n    font-size: var(--font-size-base, 14px);\r\n  }\r\n}",
+  dashboardApp: "/* Shared CSS custom properties - extracted from your existing styles */\r\n:root {\r\n  /* Colors */\r\n  --color-primary: #007bff;\r\n  --color-primary-hover: #0056b3;\r\n  --color-secondary: #6c757d;\r\n  --color-success: #28a745;\r\n  --color-warning: #ffc107;\r\n  --color-danger: #dc3545;\r\n  --color-info: #17a2b8;\r\n  \r\n  /* Backgrounds */\r\n  --bg-primary: #ffffff;\r\n  --bg-secondary: #f8f9fa;\r\n  --bg-light: #ededed;\r\n  --bg-dark: #343a40;\r\n  \r\n  /* Text Colors */\r\n  --text-primary: #212529;\r\n  --text-secondary: #6c757d;\r\n  --text-muted: #495057;\r\n  --text-white: #ffffff;\r\n  \r\n  /* Borders */\r\n  --border-color: #ddd;\r\n  --border-color-light: #e9ecef;\r\n  --border-color-dark: #919090ff;\r\n  \r\n  /* Spacing */\r\n  --spacing-xs: 4px;\r\n  --spacing-sm: 8px;\r\n  --spacing-md: 12px;\r\n  --spacing-lg: 16px;\r\n  --spacing-xl: 20px;\r\n  --spacing-2xl: 24px;\r\n  --spacing-3xl: 32px;\r\n  \r\n  /* Typography */\r\n  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\r\n  --font-size-xs: 11px;\r\n  --font-size-sm: 12px;\r\n  --font-size-base: 14px;\r\n  --font-size-md: 16px;\r\n  --font-size-lg: 18px;\r\n  --font-size-xl: 20px;\r\n  --font-weight-normal: 400;\r\n  --font-weight-medium: 500;\r\n  --font-weight-semibold: 600;\r\n  --font-weight-bold: 700;\r\n  \r\n  /* Border Radius */\r\n  --border-radius-sm: 4px;\r\n  --border-radius-md: 6px;\r\n  --border-radius-lg: 8px;\r\n  --border-radius-xl: 12px;\r\n  \r\n  /* Shadows */\r\n  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\r\n  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n  --shadow-lg: 0 -8px 32px rgba(0, 0, 0, 0.08);\r\n  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);\r\n  \r\n  /* Z-index */\r\n  --z-extension: 999999999;\r\n  --z-modal: 1050;\r\n  --z-dropdown: 1000;\r\n  \r\n  /* Transitions */\r\n  --transition-fast: 150ms ease;\r\n  --transition-base: 250ms ease;\r\n  --transition-slow: 350ms ease;\r\n}/* Dashboard styles - extracted from existing dashboard CSS AS-IS */\r\n\r\n/* Base dashboard styles */\r\n.dashboard-container {\r\n  min-height: 100vh;\r\n  background: var(--bg-secondary, #f8f9fa);\r\n  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);\r\n  color: var(--text-primary, #212529);\r\n}\r\n\r\n.header {\r\n  background: var(--bg-primary, white);\r\n  padding: var(--spacing-xl, 20px) var(--spacing-2xl, 24px);\r\n  border-bottom: 1px solid var(--border-color-light, #e9ecef);\r\n  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));\r\n}\r\n\r\n.header h1 {\r\n  color: var(--color-primary, #007bff);\r\n  margin-bottom: var(--spacing-xl, 20px);\r\n}\r\n\r\n.filters {\r\n  display: flex;\r\n  gap: var(--spacing-lg, 15px);\r\n  flex-wrap: wrap;\r\n  align-items: end;\r\n}\r\n\r\n.filter-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-xs, 5px);\r\n}\r\n\r\n.filter-group label {\r\n  font-size: var(--font-size-sm, 12px);\r\n  color: var(--text-secondary, #6c757d);\r\n  font-weight: var(--font-weight-medium, 500);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.filter-group input, .filter-group select {\r\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\r\n  border: 1px solid var(--border-color, #ddd);\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-base, 14px);\r\n  min-width: 120px;\r\n}\r\n\r\n.filter-group button {\r\n  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);\r\n  background: var(--color-primary, #007bff);\r\n  color: var(--text-white, white);\r\n  border: none;\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  font-size: var(--font-size-base, 14px);\r\n  cursor: pointer;\r\n}\r\n\r\n.filter-group button:hover {\r\n  background: var(--color-primary-hover, #0056b3);\r\n}\r\n\r\n.stats {\r\n  display: flex;\r\n  gap: var(--spacing-xl, 20px);\r\n  margin-top: var(--spacing-xl, 20px);\r\n  font-size: var(--font-size-base, 14px);\r\n  color: var(--text-secondary, #6c757d);\r\n}\r\n\r\n.table-container {\r\n  background: var(--bg-primary, white);\r\n  border-radius: var(--border-radius-lg, 8px);\r\n  box-shadow: var(--shadow-base, 0 2px 4px rgba(0,0,0,0.1));\r\n  overflow: hidden;\r\n}\r\n\r\ntable {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n}\r\n\r\nth, td {\r\n  padding: var(--spacing-lg, 15px) var(--spacing-md, 12px);\r\n  text-align: left;\r\n  border-bottom: 1px solid var(--border-color-light, #e9ecef);\r\n}\r\n\r\nth {\r\n  background: var(--bg-secondary, #f8f9fa);\r\n  font-weight: var(--font-weight-semibold, 600);\r\n  color: var(--text-muted, #495057);\r\n  font-size: var(--font-size-sm, 12px);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\nth a {\r\n  color: var(--text-muted, #495057);\r\n  text-decoration: none;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-xs, 4px);\r\n}\r\n\r\nth a:hover {\r\n  color: var(--color-primary, #007bff);\r\n}\r\n\r\nth a.sort-active {\r\n  color: var(--color-primary, #007bff);\r\n  font-weight: var(--font-weight-bold, 700);\r\n}\r\n\r\ntr:hover {\r\n  background: var(--bg-secondary, #f8f9fa);\r\n}\r\n\r\n.property-link {\r\n  color: var(--color-primary, #007bff);\r\n  text-decoration: none;\r\n  font-weight: var(--font-weight-medium, 500);\r\n}\r\n\r\n.property-link:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.contract-state {\r\n  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);\r\n  border-radius: var(--border-radius-xl, 12px);\r\n  font-size: var(--font-size-xs, 11px);\r\n  font-weight: var(--font-weight-semibold, 600);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.contract-none { \r\n  background: var(--border-color-light, #e9ecef); \r\n  color: var(--text-muted, #495057); \r\n}\r\n\r\n.contract-loi_sent { \r\n  background: #fff3cd; \r\n  color: #856404; \r\n}\r\n\r\n.contract-loi_agreed { \r\n  background: #d4edda; \r\n  color: #155724; \r\n}\r\n\r\n.contract-loi_rejected { \r\n  background: #f8d7da; \r\n  color: #721c24; \r\n}\r\n\r\n.contract-contract_signed { \r\n  background: #d1ecf1; \r\n  color: #0c5460; \r\n}\r\n\r\n.contract-closed { \r\n  background: #d4edda; \r\n  color: #155724; \r\n}\r\n\r\n.contract-not_interested { \r\n  background: #f8d7da; \r\n  color: #721c24; \r\n}\r\n\r\n.date-cell {\r\n  font-size: var(--font-size-sm, 13px);\r\n  color: var(--text-secondary, #6c757d);\r\n}\r\n\r\n.pagination {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: var(--spacing-sm, 8px);\r\n  margin-top: var(--spacing-xl, 20px);\r\n  padding: var(--spacing-xl, 20px);\r\n}\r\n\r\n.page-link {\r\n  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);\r\n  background: var(--bg-primary, white);\r\n  border: 1px solid var(--border-color, #ddd);\r\n  border-radius: var(--border-radius-sm, 4px);\r\n  color: var(--text-primary, #212529);\r\n  text-decoration: none;\r\n  transition: all var(--transition-fast, 150ms ease);\r\n}\r\n\r\n.page-link:hover {\r\n  background: var(--color-primary, #007bff);\r\n  color: var(--text-white, white);\r\n  border-color: var(--color-primary, #007bff);\r\n}\r\n\r\n.page-link.active {\r\n  background: var(--color-primary, #007bff);\r\n  color: var(--text-white, white);\r\n  border-color: var(--color-primary, #007bff);\r\n}"
+};
+
+export function injectStyles(cssString, id = "injected-styles") {
+  if (typeof document === 'undefined') return null;
+  
+  const existing = document.getElementById(id);
+  if (existing) existing.remove();
+  
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = cssString;
+  document.head.appendChild(style);
+  
+  return style;
+}
+
+export function injectFooterStyles() {
+  return injectStyles(styles.extension, "ln-footer-styles");
+}
+
+export function injectDashboardStyles() {
+  return injectStyles(styles.dashboardApp, "dashboard-styles");
+}

package/src/styles/dashboard.css

@@ -0,0 +1,209 @@
+/* Dashboard styles - extracted from existing dashboard CSS AS-IS */
+
+/* Base dashboard styles */
+.dashboard-container {
+  min-height: 100vh;
+  background: var(--bg-secondary, #f8f9fa);
+  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
+  color: var(--text-primary, #212529);
+}
+
+.header {
+  background: var(--bg-primary, white);
+  padding: var(--spacing-xl, 20px) var(--spacing-2xl, 24px);
+  border-bottom: 1px solid var(--border-color-light, #e9ecef);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+}
+
+.header h1 {
+  color: var(--color-primary, #007bff);
+  margin-bottom: var(--spacing-xl, 20px);
+}
+
+.filters {
+  display: flex;
+  gap: var(--spacing-lg, 15px);
+  flex-wrap: wrap;
+  align-items: end;
+}
+
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 5px);
+}
+
+.filter-group label {
+  font-size: var(--font-size-sm, 12px);
+  color: var(--text-secondary, #6c757d);
+  font-weight: var(--font-weight-medium, 500);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.filter-group input, .filter-group select {
+  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
+  border: 1px solid var(--border-color, #ddd);
+  border-radius: var(--border-radius-sm, 4px);
+  font-size: var(--font-size-base, 14px);
+  min-width: 120px;
+}
+
+.filter-group button {
+  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
+  background: var(--color-primary, #007bff);
+  color: var(--text-white, white);
+  border: none;
+  border-radius: var(--border-radius-sm, 4px);
+  font-size: var(--font-size-base, 14px);
+  cursor: pointer;
+}
+
+.filter-group button:hover {
+  background: var(--color-primary-hover, #0056b3);
+}
+
+.stats {
+  display: flex;
+  gap: var(--spacing-xl, 20px);
+  margin-top: var(--spacing-xl, 20px);
+  font-size: var(--font-size-base, 14px);
+  color: var(--text-secondary, #6c757d);
+}
+
+.table-container {
+  background: var(--bg-primary, white);
+  border-radius: var(--border-radius-lg, 8px);
+  box-shadow: var(--shadow-base, 0 2px 4px rgba(0,0,0,0.1));
+  overflow: hidden;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th, td {
+  padding: var(--spacing-lg, 15px) var(--spacing-md, 12px);
+  text-align: left;
+  border-bottom: 1px solid var(--border-color-light, #e9ecef);
+}
+
+th {
+  background: var(--bg-secondary, #f8f9fa);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--text-muted, #495057);
+  font-size: var(--font-size-sm, 12px);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+th a {
+  color: var(--text-muted, #495057);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 4px);
+}
+
+th a:hover {
+  color: var(--color-primary, #007bff);
+}
+
+th a.sort-active {
+  color: var(--color-primary, #007bff);
+  font-weight: var(--font-weight-bold, 700);
+}
+
+tr:hover {
+  background: var(--bg-secondary, #f8f9fa);
+}
+
+.property-link {
+  color: var(--color-primary, #007bff);
+  text-decoration: none;
+  font-weight: var(--font-weight-medium, 500);
+}
+
+.property-link:hover {
+  text-decoration: underline;
+}
+
+.contract-state {
+  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
+  border-radius: var(--border-radius-xl, 12px);
+  font-size: var(--font-size-xs, 11px);
+  font-weight: var(--font-weight-semibold, 600);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.contract-none { 
+  background: var(--border-color-light, #e9ecef); 
+  color: var(--text-muted, #495057); 
+}
+
+.contract-loi_sent { 
+  background: #fff3cd; 
+  color: #856404; 
+}
+
+.contract-loi_agreed { 
+  background: #d4edda; 
+  color: #155724; 
+}
+
+.contract-loi_rejected { 
+  background: #f8d7da; 
+  color: #721c24; 
+}
+
+.contract-contract_signed { 
+  background: #d1ecf1; 
+  color: #0c5460; 
+}
+
+.contract-closed { 
+  background: #d4edda; 
+  color: #155724; 
+}
+
+.contract-not_interested { 
+  background: #f8d7da; 
+  color: #721c24; 
+}
+
+.date-cell {
+  font-size: var(--font-size-sm, 13px);
+  color: var(--text-secondary, #6c757d);
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-sm, 8px);
+  margin-top: var(--spacing-xl, 20px);
+  padding: var(--spacing-xl, 20px);
+}
+
+.page-link {
+  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
+  background: var(--bg-primary, white);
+  border: 1px solid var(--border-color, #ddd);
+  border-radius: var(--border-radius-sm, 4px);
+  color: var(--text-primary, #212529);
+  text-decoration: none;
+  transition: all var(--transition-fast, 150ms ease);
+}
+
+.page-link:hover {
+  background: var(--color-primary, #007bff);
+  color: var(--text-white, white);
+  border-color: var(--color-primary, #007bff);
+}
+
+.page-link.active {
+  background: var(--color-primary, #007bff);
+  color: var(--text-white, white);
+  border-color: var(--color-primary, #007bff);
+}

package/src/styles/footer.css

@@ -0,0 +1,216 @@
+/* LoopNet Extension Footer - Extracted from content.js AS-IS */
+.ln-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--bg-light, #ededed);
+  border-top: 1px solid var(--border-color-dark, #919090ff);
+  box-shadow: var(--shadow-lg, 0 -8px 32px rgba(0, 0, 0, 0.08));
+  z-index: var(--z-extension, 999999999);
+  padding: var(--spacing-lg, 16px) var(--spacing-2xl, 24px);
+  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
+  font-size: var(--font-size-md, 16px);
+  color: var(--text-primary, #212529);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.ln-footer-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 1600px;
+  margin: 0 auto;
+  gap: var(--spacing-xl, 20px);
+}
+
+.ln-footer-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md, 12px);
+  flex: 1;
+  width: 100%;
+}
+
+.ln-footer-right {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg, 16px);
+  flex-shrink: 0;
+}
+
+.ln-metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  gap: var(--spacing-lg, 16px);
+  align-items: start;
+}
+
+.ln-metric-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm, 8px);
+}
+
+.ln-metric {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.ln-metric-label {
+  font-size: var(--font-size-xs, 11px);
+  color: var(--text-secondary, #6c757d);
+  font-weight: var(--font-weight-medium, 500);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  line-height: 1;
+}
+
+.ln-metric-value {
+  font-weight: var(--font-weight-semibold, 600);
+  font-size: var(--font-size-md, 16px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.2;
+}
+
+.ln-price {
+  color: var(--color-primary, #007bff);
+  font-weight: var(--font-weight-bold, 700);
+}
+
+.ln-cashflow.negative {
+  color: var(--color-danger, #dc3545);
+}
+
+.ln-cashflow.positive {
+  color: var(--color-success, #28a745);
+}
+
+.ln-phone {
+  color: var(--color-info, #17a2b8);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.ln-phone:hover {
+  color: var(--color-primary, #007bff);
+}
+
+.ln-property-type-dropdown {
+  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
+  border: 1px solid var(--border-color, #ddd);
+  border-radius: var(--border-radius-sm, 4px);
+  font-size: var(--font-size-base, 14px);
+  background: var(--bg-primary, #ffffff);
+  color: var(--text-primary, #212529);
+  cursor: pointer;
+  min-width: 120px;
+}
+
+.ln-property-type-dropdown:focus {
+  outline: none;
+  border-color: var(--color-primary, #007bff);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.ln-export-button {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm, 8px);
+  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
+  background: var(--color-primary, #007bff);
+  color: var(--text-white, #ffffff);
+  border: none;
+  border-radius: var(--border-radius-sm, 4px);
+  font-size: var(--font-size-base, 14px);
+  font-weight: var(--font-weight-medium, 500);
+  cursor: pointer;
+  transition: background-color var(--transition-fast, 150ms ease);
+}
+
+.ln-export-button:hover {
+  background: var(--color-primary-hover, #0056b3);
+}
+
+.ln-export-icon {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.ln-discount-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm, 8px);
+  margin-top: var(--spacing-sm, 8px);
+}
+
+.ln-discount-input {
+  width: 60px;
+  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
+  border: 1px solid var(--border-color, #ddd);
+  border-radius: var(--border-radius-sm, 4px);
+  font-size: var(--font-size-sm, 12px);
+  text-align: center;
+}
+
+.ln-discount-button {
+  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
+  background: var(--color-secondary, #6c757d);
+  color: var(--text-white, #ffffff);
+  border: none;
+  border-radius: var(--border-radius-sm, 4px);
+  font-size: var(--font-size-xs, 11px);
+  cursor: pointer;
+  transition: background-color var(--transition-fast, 150ms ease);
+}
+
+.ln-discount-button:hover {
+  background: var(--color-primary, #007bff);
+}
+
+.ln-discount-button.active {
+  background: var(--color-primary, #007bff);
+}
+
+@media (max-width: 1400px) {
+  .ln-metrics-grid {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+@media (max-width: 1024px) {
+  .ln-footer {
+    padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
+  }
+  
+  .ln-footer-container {
+    flex-direction: column;
+    gap: var(--spacing-md, 12px);
+  }
+  
+  .ln-metrics-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  
+  .ln-footer-right {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+
+@media (max-width: 768px) {
+  .ln-metrics-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--spacing-md, 12px);
+  }
+  
+  .ln-metric-value {
+    font-size: var(--font-size-base, 14px);
+  }
+}

package/src/styles/index.js

@@ -0,0 +1,41 @@
+// Simple CSS injection utilities - no duplication, just read CSS files and inject
+
+// Import CSS files as strings (will be handled by build process)
+import variablesCSS from "./variables.css?raw";
+import footerCSS from "./footer.css?raw";
+import dashboardCSS from "./dashboard.css?raw";
+
+// Combined CSS strings
+export const styles = {
+  variables: variablesCSS,
+  footer: footerCSS,
+  dashboard: dashboardCSS,
+  
+  // Combined styles for different contexts
+  extension: variablesCSS + footerCSS,
+  dashboardApp: variablesCSS + dashboardCSS
+};
+
+// Simple injection function
+export function injectStyles(cssString, id = "injected-styles") {
+  if (typeof document === 'undefined') return null;
+  
+  const existing = document.getElementById(id);
+  if (existing) existing.remove();
+  
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = cssString;
+  document.head.appendChild(style);
+  
+  return style;
+}
+
+// Specific injection functions for each project
+export function injectFooterStyles() {
+  return injectStyles(styles.extension, "ln-footer-styles");
+}
+
+export function injectDashboardStyles() {
+  return injectStyles(styles.dashboardApp, "dashboard-styles");
+}

package/src/styles/variables.css

@@ -0,0 +1,73 @@
+/* Shared CSS custom properties - extracted from your existing styles */
+:root {
+  /* Colors */
+  --color-primary: #007bff;
+  --color-primary-hover: #0056b3;
+  --color-secondary: #6c757d;
+  --color-success: #28a745;
+  --color-warning: #ffc107;
+  --color-danger: #dc3545;
+  --color-info: #17a2b8;
+  
+  /* Backgrounds */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8f9fa;
+  --bg-light: #ededed;
+  --bg-dark: #343a40;
+  
+  /* Text Colors */
+  --text-primary: #212529;
+  --text-secondary: #6c757d;
+  --text-muted: #495057;
+  --text-white: #ffffff;
+  
+  /* Borders */
+  --border-color: #ddd;
+  --border-color-light: #e9ecef;
+  --border-color-dark: #919090ff;
+  
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 20px;
+  --spacing-2xl: 24px;
+  --spacing-3xl: 32px;
+  
+  /* Typography */
+  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+  --font-size-xs: 11px;
+  --font-size-sm: 12px;
+  --font-size-base: 14px;
+  --font-size-md: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  
+  /* Border Radius */
+  --border-radius-sm: 4px;
+  --border-radius-md: 6px;
+  --border-radius-lg: 8px;
+  --border-radius-xl: 12px;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 -8px 32px rgba(0, 0, 0, 0.08);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
+  
+  /* Z-index */
+  --z-extension: 999999999;
+  --z-modal: 1050;
+  --z-dropdown: 1000;
+  
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-base: 250ms ease;
+  --transition-slow: 350ms ease;
+}