/**
 * Components CSS
 * Reusable Dashboard Components
 */

/* ========================================
   DASHBOARD CONTENT CONTAINER
   ======================================== */

.dashboard-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    width: 100%;
    box-sizing: border-box;
}

/* ========================================
   DASHBOARD FOOTER
   ======================================== */

.dashboard-footer {
    margin-top: var(--space-2xl);
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--color-gray-200);
    text-align: center;
}

.dashboard-footer-content {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}

/* ========================================
   DASHBOARD HEADER
   ======================================== */

.dashboard-header {
    background: linear-gradient(135deg, var(--header-color-dark, var(--color-gray-800)) 0%, var(--header-color, var(--color-gray-600)) 100%);
    color: var(--color-white);
    padding: var(--space-lg) var(--space-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

/* Category-specific header colors */
.dashboard-header.financial {
    --header-color: var(--color-financial);
    --header-color-dark: var(--color-financial-dark);
}

.dashboard-header.operational {
    --header-color: var(--color-operational);
    --header-color-dark: var(--color-operational-dark);
}

.dashboard-header.analytics {
    --header-color: var(--color-analytics);
    --header-color-dark: var(--color-analytics-dark);
}

.dashboard-header.personnel {
    --header-color: var(--color-personnel);
    --header-color-dark: var(--color-personnel-dark);
}

.dashboard-header.forecasting {
    --header-color: var(--color-forecasting);
    --header-color-dark: var(--color-forecasting-dark);
}

.dashboard-header.resident {
    --header-color: var(--color-resident);
    --header-color-dark: var(--color-resident-dark);
}

.dashboard-header.property {
    --header-color: var(--color-property);
    --header-color-dark: var(--color-property-dark);
}

.dashboard-header.management {
    --header-color: var(--color-management);
    --header-color-dark: var(--color-management-dark);
}

.dashboard-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    min-width: 0; /* Allow text to wrap if needed */
}

.dashboard-header-text h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin: 0;
    color: var(--color-white);
}

.dashboard-header-subtitle {
    margin: 4px 0 0 0;
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

.dashboard-header-icon {
    font-size: var(--font-size-3xl);
    flex-shrink: 0;
}

.dashboard-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}

.dashboard-header-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    opacity: 0.95;
}

.dashboard-header-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.dashboard-header-filters {
    /* Compact filter styling */
}

.dashboard-filters-container {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
}

.dashboard-header-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dashboard-header-filters .filter-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-white);
    opacity: 0.9;
}

/* Property filter and date inputs styling - unified appearance */
.dashboard-header-filters select,
.dashboard-header-filters .filter-select,
.dashboard-header-filters input[type="date"],
.dashboard-header-filters .filter-date {
    /* Exact same styling for all inputs */
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: inherit;
    font-weight: 500;
    height: 36px;
    line-height: 1.5;
    min-width: 150px;
    max-width: 180px;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Select dropdown arrow */
.dashboard-header-filters select,
.dashboard-header-filters .filter-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

/* Date input calendar icon */
.dashboard-header-filters input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(2);
    cursor: pointer;
    opacity: 0.9;
    width: 16px;
    height: 16px;
}

.dashboard-header-filters input[type="date"]::-webkit-inner-spin-button,
.dashboard-header-filters input[type="date"]::-webkit-clear-button {
    display: none;
}

/* Firefox date input */
.dashboard-header-filters input[type="date"] {
    color-scheme: dark;
}

/* Hover states */
.dashboard-header-filters select:hover,
.dashboard-header-filters .filter-select:hover,
.dashboard-header-filters input[type="date"]:hover,
.dashboard-header-filters .filter-date:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Focus states */
.dashboard-header-filters select:focus,
.dashboard-header-filters .filter-select:focus,
.dashboard-header-filters input[type="date"]:focus,
.dashboard-header-filters .filter-date:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    background-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

/* Dropdown options */
.dashboard-header-filters select option {
    background-color: var(--color-gray-900);
    color: var(--color-white);
    padding: 0.5rem;
}

/* Placeholder styling for date inputs */
.dashboard-header-filters input[type="date"]::-webkit-datetime-edit-text,
.dashboard-header-filters input[type="date"]::-webkit-datetime-edit-month-field,
.dashboard-header-filters input[type="date"]::-webkit-datetime-edit-day-field,
.dashboard-header-filters input[type="date"]::-webkit-datetime-edit-year-field {
    color: var(--color-white);
    opacity: 1;
}

/* ========================================
   KPI CARDS
   ======================================== */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.kpi-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.kpi-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.kpi-card.kpi-card-clickable {
    cursor: pointer;
}

.kpi-card.kpi-card-clickable:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-left: 3px solid var(--color-primary, #6366f1);
}

.kpi-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-sm);
}

.kpi-card-content {
    flex: 1;
}

.kpi-card-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-xs);
    display: block;
}

.kpi-card-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    line-height: 1.2;
}

/* Data-driven colors for KPI values */
.kpi-card-value.positive {
    color: var(--color-success);
}

.kpi-card-value.negative {
    color: var(--color-danger);
}

.kpi-card-value.warning {
    color: var(--color-warning);
}

.kpi-card-value.neutral {
    color: var(--color-info);
}

.kpi-card-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.kpi-card-change.positive {
    color: var(--color-success-dark);
    background: var(--color-success-light);
}

.kpi-card-change.negative {
    color: var(--color-danger-dark);
    background: var(--color-danger-light);
}

.kpi-card-change.neutral {
    color: var(--color-gray-600);
    background: var(--color-gray-100);
}

.kpi-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: linear-gradient(135deg, var(--icon-color-start, var(--color-info)) 0%, var(--icon-color-end, var(--color-info-dark)) 100%);
    color: var(--color-white);
    flex-shrink: 0;
}

/* Icon color variants */
.kpi-card-icon.success {
    --icon-color-start: var(--color-success);
    --icon-color-end: var(--color-success-dark);
}

.kpi-card-icon.danger {
    --icon-color-start: var(--color-danger);
    --icon-color-end: var(--color-danger-dark);
}

.kpi-card-icon.warning {
    --icon-color-start: var(--color-warning);
    --icon-color-end: var(--color-warning-dark);
}

.kpi-card-icon.info {
    --icon-color-start: var(--color-info);
    --icon-color-end: var(--color-info-dark);
}

/* ========================================
   SECTION HEADER
   ======================================== */

.section-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin: var(--space-lg) 0 var(--space-md) 0;
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-gray-200);
}

/* Override Bootstrap's card styles */
.card {
    border: none !important;
}

.card-header {
    border-bottom: none !important;
}

.section-header-icon {
    font-size: var(--font-size-2xl);
    color: var(--color-gray-600);
}

.section-header-title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

/* ========================================
   DATA TABLE
   ======================================== */

.table-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: var(--space-lg);
    padding: var(--space-lg);
}

.table-header {
    background-color: var(--color-gray-50);
    padding: 1.25rem 1.5rem;
    font-weight: var(--font-weight-semibold);
    border-bottom: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-header iconify-icon {
    color: var(--color-primary);
    font-size: 1.25rem;
}

.table-card-header {
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin: 0;
}

.table-responsive {
    overflow-x: auto;
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.table-card > .table-responsive {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Investment Calculator alignment fix */
#calculatorResults .table-responsive {
    padding: 0 0 1.5rem 0;
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.dashboard-table thead {
    background: var(--color-gray-50);
}

.dashboard-table thead th {
    padding: var(--space-sm);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    border-bottom: 2px solid var(--color-gray-200);
    white-space: nowrap;
}

.dashboard-table tbody tr {
    border-bottom: 1px solid var(--color-gray-100);
    transition: var(--transition-fast);
}

.dashboard-table tbody tr:hover {
    background: var(--color-gray-50);
}

.dashboard-table tbody tr:last-child {
    border-bottom: none;
}

.dashboard-table tbody td {
    padding: var(--space-sm);
    color: var(--color-gray-700);
}

.dashboard-table tbody td.text-right {
    text-align: right;
}

.dashboard-table tbody td.text-center {
    text-align: center;
}

/* Table special rows for P&L statements */
.dashboard-table .table-section-header {
    background: var(--color-gray-100);
    font-weight: var(--font-weight-bold);
}

.dashboard-table .table-section-header.table-income {
    background: #f0f9ff; /* Light blue */
}

.dashboard-table .table-section-header.table-expenses {
    background: #fef2f2; /* Light red */
}

.dashboard-table .table-total-row {
    background: var(--color-gray-50);
    font-weight: var(--font-weight-bold);
    border-top: 2px solid var(--color-gray-300);
}

.dashboard-table .table-highlight-row {
    font-weight: var(--font-weight-bold);
    font-size: 1.05rem;
    border-top: 3px solid var(--color-gray-800);
}

.dashboard-table .table-success {
    background: #dcfce7; /* Light green */
}

.dashboard-table .table-danger {
    background: #fee2e2; /* Light red */
}

/* ========================================
   CHART CONTAINER
   ======================================== */

.chart-container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.chart-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin: 0;
}

.chart-wrapper {
    width: 100%;
    height: 400px;
    position: relative;
    padding: 1.5rem;
}

.chart-wrapper.small {
    height: 300px;
}

.chart-wrapper.medium {
    height: 400px;
}

.chart-wrapper.large {
    height: 500px;
}

/* Ensure chart divs fit properly */
.chart-wrapper > div {
    width: 100%;
    height: 100%;
}

/* Prevent charts from overflowing Bootstrap columns */
.table-card {
    overflow: hidden;
}

/* ========================================
   BADGES & STATUS INDICATORS
   ======================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.badge.badge-success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.badge.badge-warning {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.badge.badge-danger {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.badge.badge-info {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.badge.badge-neutral {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

/* ========================================
   ALERTS & NOTIFICATIONS
   ======================================== */

.alert {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

/* Override alert flex layout when it contains Bootstrap grid */
.alert .row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.alert .row > [class*="col-"] {
    position: relative;
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    flex: 0 0 auto;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Ensure chart containers don't overflow */
.alert .row > [class*="col-"] > div {
    max-width: 100%;
    box-sizing: border-box;
}

.alert .row > [class*="col-"] .plotly {
    max-width: 100% !important;
    overflow: hidden;
}

/* Loss to Lease Alert - Prevent chart overflow */
.alert-danger .row.g-4 {
    margin: 0;
}

.alert-danger .row.g-4 > [class*="col-"] {
    padding-left: 12px;
    padding-right: 12px;
    flex-shrink: 0;
    flex-grow: 0;
    overflow: hidden;
}

/* Constrain the white container inside the column */
.alert-danger .col-lg-10 > div,
.alert-danger .col-md-9 > div {
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Clip the chart container contents */
.alert-danger #lossToLeaseChart {
    overflow: hidden;
    clip-path: inset(0);
}

.alert .row > [class*="col-"] .plotly,
.alert .row > [class*="col-"] #lossToLeaseChart {
    max-width: 100%;
    box-sizing: border-box;
}

/* Force Plotly chart to stay within bounds */
#lossToLeaseChart .plotly,
#lossToLeaseChart .js-plotly-plot {
    max-width: 100% !important;
    overflow: hidden !important;
}

#lossToLeaseChart svg {
    max-width: 100% !important;
}

/* Ensure large screens maintain side-by-side layout with proper widths */
@media (min-width: 992px) {
    .alert .row.g-4 .col-lg-2 {
        flex: 0 0 auto;
        width: 16.666667%;
        max-width: 16.666667%;
        position: relative;
        z-index: 10;
    }
    .alert .row.g-4 .col-lg-10 {
        flex: 0 0 auto;
        width: 83.333333%;
        max-width: 83.333333%;
        position: relative;
        z-index: 1;
    }

    /* Prevent any horizontal overflow on desktop */
    .alert-danger .row.g-4 {
        flex-wrap: nowrap;
    }

    /* Create a gap between columns */
    .alert-danger .row.g-4 .col-lg-2 {
        padding-right: 24px;
    }

    .alert-danger .row.g-4 .col-lg-10 {
        padding-left: 8px;
    }

    /* Force the white container to respect column boundaries */
    .alert-danger .col-lg-10 > div {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Absolutely prevent Plotly from exceeding bounds */
    .alert-danger #lossToLeaseChart,
    .alert-danger #lossToLeaseChart > div {
        max-width: 100% !important;
        width: 100% !important;
        overflow: hidden !important;
    }
}

.alert-icon {
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: 4px;
}

.alert.alert-success {
    background: var(--color-success-light);
    border-left: 4px solid var(--color-success);
    color: var(--color-success-dark);
}

.alert.alert-warning {
    background: var(--color-warning-light);
    border-left: 4px solid var(--color-warning);
    color: var(--color-warning-dark);
}

.alert.alert-danger {
    background: var(--color-danger-light);
    border-left: 4px solid var(--color-danger);
    color: var(--color-danger-dark);
}

.alert.alert-info {
    background: var(--color-info-light);
    border-left: 4px solid var(--color-info);
    color: var(--color-info-dark);
}

/* ========================================
   PROGRESS BARS
   ======================================== */

.progress-bar-wrapper {
    margin: var(--space-sm) 0;
}

.progress-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: 4px;
}

.progress-bar {
    height: 8px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--color-info);
    border-radius: var(--radius-full);
    transition: width var(--transition-normal);
}

.progress-bar-fill.success {
    background: var(--color-success);
}

.progress-bar-fill.warning {
    background: var(--color-warning);
}

.progress-bar-fill.danger {
    background: var(--color-danger);
}

/* ========================================
   FILTERS & CONTROLS
   ======================================== */

.dashboard-filters {
    background: var(--color-white);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    align-items: center;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
}

.filter-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
}

.filter-select,
.filter-input,
.filter-date {
    padding: 8px 12px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
}

/* Date input calendar icon */
.filter-date::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
    width: 16px;
    height: 16px;
}

.filter-date:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

.filter-select:focus,
.filter-input:focus,
.filter-date:focus {
    outline: none;
    border-color: var(--color-info);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ========================================
   LEASING PERFORMANCE - AGENT CARDS
   ======================================== */

.agent-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.agent-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 2px solid var(--color-gray-200);
    transition: all 0.3s;
}

.agent-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
}

.agent-card.on-track { border-color: var(--color-success); }
.agent-card.at-risk { border-color: var(--color-danger); }
.agent-card.exceeding { border-color: var(--color-primary); }

.agent-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
}

.agent-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

.status-badge {
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.on-track { background-color: #d1f4e0; color: #0f5132; }
.status-badge.at-risk { background-color: #f8d7da; color: #842029; }
.status-badge.exceeding { background-color: #cfe2ff; color: #084298; }

.performance-bar {
    width: 100%;
    height: 8px;
    background-color: var(--color-gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 1rem 0;
}

.performance-fill {
    height: 100%;
    transition: width 0.3s;
}

.performance-fill.on-track { background: linear-gradient(90deg, #22c55e 0%, #10b981 100%); }
.performance-fill.at-risk { background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); }
.performance-fill.exceeding { background: linear-gradient(90deg, #06b6d4 0%, #0891b2 100%); }

.performance-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 1rem 0;
}

.stat-item {
    text-align: center;
    padding: 0.5rem;
    background-color: var(--color-gray-50);
    border-radius: var(--radius-sm);
}

.stat-label {
    font-size: 0.7rem;
    color: var(--color-gray-600);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

.prediction-section {
    background-color: #f0f9ff;
    padding: 1rem;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
    margin: 1rem 0;
}

.prediction-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #0369a1;
    margin-bottom: 0.5rem;
}

.prediction-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0369a1;
}

.probability {
    font-size: 0.85rem;
    color: #0891b2;
    margin-top: 0.25rem;
}

.section-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-gray-600);
    margin-bottom: 0.5rem;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 500;
}

.tag.strength { background-color: #d1f4e0; color: #0f5132; }
.tag.weakness { background-color: #f8d7da; color: #842029; }

/* ========================================
   LEASING PERFORMANCE - LEAD SCORING
   ======================================== */

.lead-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.lead-table thead th {
    background-color: var(--color-gray-50);
    color: var(--color-gray-600);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 1rem;
    text-align: left;
    border-bottom: 2px solid var(--color-gray-200);
}

.lead-table tbody td {
    padding: 1rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.lead-table tbody tr:hover {
    background-color: var(--color-gray-50);
}

.lead-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    font-size: 1rem;
    font-weight: 700;
}

.lead-score-badge.hot { background: linear-gradient(135deg, #ef4444 0%, #f97316 100%); color: white; }
.lead-score-badge.warm { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: white; }
.lead-score-badge.cold { background-color: var(--color-gray-200); color: var(--color-gray-600); }

.match-score {
    font-weight: 700;
    color: var(--color-primary);
}

/* ========================================
   LEASING PERFORMANCE - COACHING
   ======================================== */

.coaching-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.coaching-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border-left: 4px solid;
    transition: all 0.3s;
}

.coaching-card.high-priority {
    border-left-color: var(--color-danger);
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, white 100%);
}

.coaching-card.medium-priority {
    border-left-color: var(--color-warning);
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.05) 0%, white 100%);
}

.coaching-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.priority-badge {
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-badge.high { background-color: #fee; color: #dc3545; }
.priority-badge.medium { background-color: #fff3cd; color: #fd7e14; }

.coaching-suggestion {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.75rem;
}

.coaching-impact {
    background-color: #d1f4e0;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    color: #0f5132;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-align: center;
}

.training-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.training-list li {
    padding: 0.25rem 0;
    font-size: 0.85rem;
    color: var(--color-gray-600);
}

/* ========================================
   LEASING PERFORMANCE - REAL-TIME COACHING
   ======================================== */

.real-time-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.real-time-card {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, white 100%);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 2px solid var(--color-primary);
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0%, 100% { border-color: var(--color-primary); }
    50% { border-color: #0891b2; }
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-danger);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.8); }
}

.live-indicator {
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.ai-suggestions-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.ai-suggestions-list li {
    padding: 0.75rem;
    background-color: #f0f9ff;
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #0369a1;
}

.sentiment-badge {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    display: inline-block;
    margin-top: 0.5rem;
}

.sentiment-badge.very-positive { background-color: #d1f4e0; color: #0f5132; }
.sentiment-badge.positive { background-color: #cfe2ff; color: #084298; }

/* ========================================
   LEASING PERFORMANCE - COMPENSATION
   ======================================== */

.comp-comparison {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.comp-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 2px solid var(--color-gray-200);
    text-align: center;
    transition: all 0.3s;
}

.comp-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
}

.comp-card.recommended {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, white 100%);
}

.comp-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 1rem;
}

.comp-detail {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-gray-200);
    font-size: 0.9rem;
}

.comp-label {
    color: var(--color-gray-600);
}

.comp-value {
    font-weight: 600;
    color: var(--color-gray-900);
}

.predicted-increase {
    background-color: #d1f4e0;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    margin-top: 1rem;
    font-weight: 700;
    color: #0f5132;
    font-size: 1.2rem;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

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

    .dashboard-header {
        padding: var(--space-md);
    }

    .dashboard-header-title h1 {
        font-size: var(--font-size-2xl);
    }

    .kpi-card-value {
        font-size: var(--font-size-2xl);
    }

    .section-header {
        font-size: var(--font-size-lg);
    }

    .chart-wrapper {
        height: 300px;
    }

    .dashboard-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        min-width: 100%;
    }

    .agent-cards-grid {
        grid-template-columns: 1fr;
    }

    .coaching-grid,
    .real-time-cards,
    .comp-comparison {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   PROPERTY PERFORMANCE COMPARISON - HEATMAP
   ======================================== */

.property-heatmap {
    margin-bottom: 0;
}

.property-heatmap .heatmap-cell {
    font-weight: 600;
    padding: 0.75rem;
    transition: all 0.2s;
}

.property-heatmap .heatmap-green {
    background-color: #d1fae5;
    color: var(--color-success);
}

.property-heatmap .heatmap-yellow {
    background-color: #fef3c7;
    color: #92400e;
}

.property-heatmap .heatmap-red {
    background-color: #fee2e2;
    color: var(--color-danger);
}

.property-heatmap .heatmap-cell:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

/* ========================================
   EMPLOYEE DASHBOARD - PERSONNEL
   ======================================== */

.employee-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, #a78bfa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-weight: 700;
    font-size: 1.25rem;
}

/* Department Cards */
.employee-dept-card {
    padding: var(--space-lg);
}

.employee-dept-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    color: var(--color-gray-900);
}

.employee-dept-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.employee-stat-label {
    font-size: 0.75rem;
    color: var(--color-gray-600);
    margin-bottom: 0.25rem;
}

.employee-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-gray-900);
}

.employee-dept-footer {
    border-top: 1px solid var(--color-gray-200);
    padding-top: 0.75rem;
}

.employee-dept-rate {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-700);
}

/* Employee Profile Cards */
.employee-profile-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    transition: transform 0.2s;
}

.employee-profile-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.employee-profile-name {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-gray-900);
}

.employee-section {
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.employee-section-time {
    background: var(--color-gray-50);
}

.employee-section-payroll {
    background: #f0fdf4;
}

.employee-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: 0.75rem;
}

.employee-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.employee-section-footer {
    border-top: 1px solid var(--color-gray-200);
    padding-top: var(--space-md);
}

/* ========================================
   LABOR VS REVENUE - PERSONNEL
   ======================================== */

.labor-group-stats,
.labor-member-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

/* ========================================
   PAYROLL DASHBOARD - GRADIENT KPI CARDS
   ======================================== */

.gradient-kpi-info {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: var(--color-white);
}

.gradient-kpi-info .kpi-label,
.gradient-kpi-info .kpi-value,
.gradient-kpi-info .kpi-change {
    color: var(--color-white) !important;
}

.gradient-kpi-danger {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    color: var(--color-white);
}

.gradient-kpi-danger .kpi-label,
.gradient-kpi-danger .kpi-value,
.gradient-kpi-danger .kpi-change {
    color: var(--color-white) !important;
}

.gradient-kpi-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: var(--color-white);
}

.gradient-kpi-warning .kpi-label,
.gradient-kpi-warning .kpi-value,
.gradient-kpi-warning .kpi-change {
    color: var(--color-white) !important;
}

.gradient-kpi-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: var(--color-white);
}

.gradient-kpi-success .kpi-label,
.gradient-kpi-success .kpi-value,
.gradient-kpi-success .kpi-change {
    color: var(--color-white) !important;
}

/* ========================================
   MARKET INTELLIGENCE - METRIC CARDS
   ======================================== */

.metric-card {
    background: var(--color-white);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.metric-label {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: 0.5rem;
}

.metric-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.metric-change {
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.metric-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 2rem;
    flex-shrink: 0;
}

/* Gradient icon backgrounds */
.metric-icon.gradient-success {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.metric-icon.gradient-info {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.metric-icon.gradient-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.metric-icon.gradient-danger {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

.metric-icon.gradient-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

/* ========================================
   CONTRACT FORECAST - CONTRACT CARDS
   ======================================== */

.contract-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    border-left: 4px solid;
    height: 100%;
}

.contract-active {
    border-left-color: var(--color-success);
}

.contract-ending-soon {
    border-left-color: var(--color-warning);
}

.contract-pipeline {
    border-left-color: var(--color-secondary);
    opacity: 0.85;
}

.contract-title {
    font-weight: 700;
    margin-bottom: 0.25rem;
    font-size: 1.125rem;
}

.contract-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.contract-period {
    font-size: 0.75rem;
    color: var(--color-gray-600);
}

.contract-meta-label {
    font-size: 0.75rem;
    color: var(--color-gray-600);
}

.contract-meta-value {
    font-weight: 600;
    color: var(--color-gray-900);
}

.contract-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contract-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--color-gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.contract-progress-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.contract-progress-label {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-active {
    background: #d1fae5;
    color: #065f46;
}

.status-ending {
    background: #fef3c7;
    color: #92400e;
}

.status-pipeline {
    background: #dbeafe;
    color: #1e3a8a;
}

/* Risk indicators */
.risk-high {
    color: var(--color-danger);
    font-weight: 600;
}

.risk-medium {
    color: var(--color-warning);
    font-weight: 600;
}

.risk-low {
    color: var(--color-success);
    font-weight: 600;
}

/* ========================================
   CONTRACT FORECAST - INSIGHT CARDS
   ======================================== */

.insight-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid;
    height: 100%;
}

.insight-critical {
    border-left-color: var(--color-danger);
}

.insight-growth {
    border-left-color: var(--color-success);
}

.insight-scenarios {
    border-left-color: var(--color-secondary);
}

.insight-title {
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.insight-critical .insight-title {
    color: var(--color-danger);
}

.insight-growth .insight-title {
    color: var(--color-success);
}

.insight-scenarios .insight-title {
    color: var(--color-secondary);
}

.insight-list {
    margin: 0;
    padding-left: 1.5rem;
}

.insight-list li {
    margin-bottom: 0.75rem;
}

/* ========================================
   PRE-LEASE FORECASTING - 6-COLUMN KPI GRID
   ======================================== */

.kpi-grid-6 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

@media (min-width: 1200px) {
    .kpi-grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 992px) {
    .kpi-grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .kpi-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Forecast-specific metric card variants */
.metric-card.forecast-prediction {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.metric-card.forecast-prediction .metric-label,
.metric-card.forecast-prediction .metric-value,
.metric-card.forecast-prediction .metric-subtitle {
    color: var(--color-white) !important;
}

.metric-card.forecast-highlight {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.metric-card.forecast-highlight .metric-label,
.metric-card.forecast-highlight .metric-value,
.metric-card.forecast-highlight .metric-subtitle {
    color: var(--color-white) !important;
}

.metric-subtitle {
    font-size: 0.75rem;
    margin-top: 0.5rem;
    opacity: 0.9;
    line-height: 1.4;
}

/* ========================================
   RENT OPTIMIZATION DASHBOARD
   ======================================== */

/* Revenue Simulator Cards */
.simulator-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.scenario-card {
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.scenario-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.scenario-card.active {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, rgba(17, 153, 142, 0.05) 0%, rgba(56, 239, 125, 0.05) 100%);
}

.scenario-card.current {
    border-color: var(--color-gray-400);
    background: var(--color-gray-50);
}

.scenario-name {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--color-gray-900);
}

.scenario-metric {
    font-size: 0.85rem;
    color: var(--color-gray-600);
    margin-bottom: 0.5rem;
}

.scenario-revenue {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0.75rem 0;
}

.scenario-risk {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.scenario-risk.low,
.scenario-risk.minimal {
    background-color: var(--color-success);
    color: var(--color-white);
}

.scenario-risk.medium,
.scenario-risk.moderate {
    background-color: var(--color-warning);
    color: var(--color-white);
}

.scenario-risk.high {
    background-color: var(--color-danger);
    color: var(--color-white);
}

/* Scenario Detail Panel */
.scenario-detail-panel {
    display: none;
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-top: var(--space-lg);
    border-left: 4px solid var(--color-primary);
}

.scenario-detail-panel.visible {
    display: block;
    animation: slideDown 0.3s ease;
}

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

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-gray-200);
}

.detail-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

.detail-close {
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--color-gray-500);
    transition: color 0.2s;
}

.detail-close:hover {
    color: var(--color-gray-900);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: 1.5rem;
}

.detail-metric {
    background: var(--color-white);
    padding: 1rem;
    border-radius: var(--radius-md);
}

.detail-metric-label {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: 0.5rem;
}

.detail-metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0.25rem;
}

.detail-metric-change {
    font-size: 0.875rem;
    font-weight: 600;
}

.detail-metric-change.positive {
    color: var(--color-success);
}

.detail-metric-change.negative {
    color: var(--color-danger);
}

.detail-impact-section {
    background: var(--color-white);
    padding: 1.5rem;
    border-radius: var(--radius-md);
}

.impact-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 1rem;
}

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

.impact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.impact-list li:last-child {
    border-bottom: none;
}

.impact-list li iconify-icon {
    font-size: 1.25rem;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* Rent Optimization Specific Metric Card Variants */
.metric-card.revenue-opportunity {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.metric-card.revenue-opportunity .metric-label,
.metric-card.revenue-opportunity .metric-value,
.metric-card.revenue-opportunity .metric-subtitle {
    color: var(--color-white) !important;
}

.metric-card.revenue-opportunity .metric-icon {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}

.metric-card.underpriced {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.metric-card.underpriced .metric-label,
.metric-card.underpriced .metric-value,
.metric-card.underpriced .metric-subtitle {
    color: var(--color-white) !important;
}

.metric-card.underpriced .metric-icon {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}

.metric-card.revenue-at-risk {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

.metric-card.revenue-at-risk .metric-label,
.metric-card.revenue-at-risk .metric-value,
.metric-card.revenue-at-risk .metric-subtitle {
    color: var(--color-white) !important;
}

.metric-card.revenue-at-risk .metric-icon {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}

/* ========================================
   PORTFOLIO DASHBOARD CARDS
   ======================================== */

/* Property Overview Cards */
.property-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: var(--space-md);
}

.property-card-title {
    font-weight: 700;
    margin-bottom: 0.25rem;
    font-size: var(--font-size-lg);
}

.property-card-location {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

/* Metric Display - Small */
.metric-display-sm {
    text-align: center;
    padding: var(--space-sm);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
}

.metric-display-sm .metric-label {
    font-size: 0.7rem;
    color: var(--color-gray-600);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.metric-display-sm .metric-value-large {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.metric-display-sm .metric-change {
    font-size: var(--font-size-sm);
    margin-top: 0.25rem;
}

/* Metric Display - Table Cell */
.metric-cell {
    text-align: center;
    padding: var(--space-sm);
}

.metric-cell .metric-value-primary {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.metric-cell-progress {
    height: 6px;
    margin-top: 4px;
}

/* Property Metrics Grid */
.property-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.property-metric-item .metric-label {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.property-metric-item .metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.property-metric-item .metric-value-md {
    font-size: 1rem;
    font-weight: 600;
}

/* Lead Performance Cards */
.lead-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.lead-metrics-comparison {
    font-size: 0.75rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-md);
}

.lead-sources-section {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.lead-sources-table thead tr {
    font-size: 0.75rem;
}

.lead-sources-table tbody {
    font-size: 0.85rem;
}

.lead-sources-table .conversion-badge {
    font-size: 0.7rem;
}

.lead-sources-table .conversion-rate {
    font-weight: 600;
}

.lead-sources-table .no-data {
    font-size: 0.8rem;
}

/* Lease Activity Cards */
.lease-activity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}

.lease-activity-item {
    padding: var(--space-sm);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    min-height: 120px;
}

.lease-activity-item .activity-header {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.lease-activity-item .activity-units {
    font-size: 0.75rem;
}

/* Progress Indicators */
.progress-with-label {
    margin-top: var(--space-sm);
}

.progress-with-label .progress {
    height: 8px;
    margin-bottom: 0.25rem;
}

.progress-with-label .progress-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

/* Small Progress Bar - For compact displays */
.progress-sm {
    height: 6px !important;
    background-color: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-sm .progress-bar {
    height: 6px;
    border-radius: var(--radius-full);
}

/* ===========================================
   Marketing Dashboard - Insight Cards
   ======================================== */

.insight-card {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: transform 0.2s;
}

.insight-card:hover {
    transform: translateY(-2px);
}

.insight-icon {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
    opacity: 0.8;
}

.insight-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
}

.insight-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--space-xs);
}

.insight-detail {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

/* Bootstrap subtle background utilities */
.bg-success-subtle {
    background-color: rgba(16, 185, 129, 0.1);
}

.bg-primary-subtle {
    background-color: rgba(99, 102, 241, 0.1);
}

.bg-info-subtle {
    background-color: rgba(14, 165, 233, 0.1);
}

.bg-warning-subtle {
    background-color: rgba(245, 158, 11, 0.1);
}

/* ===========================================
   Marketing Dashboard - Engagement Stats
   ======================================== */

.engagement-stat {
    margin-bottom: var(--space-lg);
}

.engagement-stat:last-child {
    margin-bottom: 0;
}

.engagement-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-xs);
}

.engagement-label iconify-icon {
    font-size: 1.25rem;
}

.engagement-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.engagement-detail {
    font-size: var(--font-size-sm);
    margin-top: var(--space-xs);
}

@media (max-width: 992px) {
    .simulator-container {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .simulator-container {
        grid-template-columns: 1fr;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   Social Media Dashboard
   ======================================== */

/* Organic vs Paid Cards */
.social-organic-paid-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.social-organic-paid-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: var(--space-lg);
}

.social-organic-paid-title.organic {
    color: #667eea;
}

.social-organic-paid-title.paid {
    color: var(--color-orange-600);
}

/* Social Stats Grid */
.social-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.social-stats-grid .stat-item {
    font-size: var(--font-size-sm);
}

.social-stats-grid .stat-label {
    color: var(--color-gray-600);
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-xs);
}

.social-stats-grid .stat-value {
    font-weight: 600;
    color: var(--color-gray-900);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-xs);
}

.social-stats-grid .stat-value.organic {
    color: #667eea;
}

.social-stats-grid .stat-value.paid {
    color: var(--color-orange-600);
}

.social-stats-grid .stat-value.success {
    color: var(--color-green-600);
}

.social-stats-grid .stat-value.danger {
    color: var(--color-red-600);
}

.social-stats-grid .stat-percentage {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
}

/* Platform Cards */
.social-platform-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--space-lg);
    border-left: 4px solid;
    transition: transform 0.2s;
}

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

.social-platform-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 1.125rem;
}

.social-platform-name {
    font-weight: 700;
    margin: 0;
    font-size: var(--font-size-lg);
}

.social-platform-posts {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
}

.social-platform-section {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-gray-200);
}

.social-section-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    margin-bottom: var(--space-xs);
}

.social-section-value {
    font-weight: 600;
    color: var(--color-gray-900);
}

.social-section-label-bold {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    margin-bottom: var(--space-sm);
    font-weight: 600;
}

.social-organic-label {
    font-size: var(--font-size-xs);
    color: #667eea;
}

.social-paid-label {
    font-size: var(--font-size-xs);
    color: var(--color-orange-600);
}

.social-metric-value {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.social-metric-sub {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
}

/* Post Cards */
.social-post-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--space-lg);
    border-left: 4px solid;
}

.social-post-date {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
}

.social-post-title {
    font-weight: 600;
    margin-bottom: var(--space-lg);
}

/* Insights */
.social-insights-container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.social-insight-card {
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    border-left: 4px solid;
}

.social-insight-card:last-child {
    margin-bottom: 0;
}

.social-insight-card.success {
    background: var(--color-green-50);
    border-left-color: var(--color-green-600);
}

.social-insight-card.info {
    background: var(--color-blue-50);
    border-left-color: var(--color-blue-600);
}

.social-insight-header {
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.social-insight-card.success .social-insight-header {
    color: var(--color-green-700);
}

.social-insight-card.info .social-insight-header {
    color: var(--color-blue-700);
}

.social-insight-body {
    font-size: var(--font-size-sm);
}

.social-insight-card.success .social-insight-body {
    color: var(--color-green-700);
}

.social-insight-card.info .social-insight-body {
    color: var(--color-blue-700);
}

/* Posting Time Cards */
.social-posting-time-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--space-lg);
    height: 100%;
}

.social-posting-time-title {
    font-weight: 600;
    margin-bottom: var(--space-lg);
}

.social-posting-time-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.social-posting-time-row:last-child {
    margin-bottom: 0;
}

.social-posting-time-label {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}

.social-posting-time-value {
    font-weight: 600;
}

.social-posting-time-value.success {
    color: var(--color-green-600);
}

/* ===========================================
   Product Analytics Dashboard
   ======================================== */

/* Funnel Steps */
.product-funnel-step {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    border-left: 4px solid;
}

/* Feature Cards */
.product-feature-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--space-lg);
    border-left: 4px solid;
    transition: transform 0.2s;
}

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

/* Stats Grid */
.product-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.product-stats-grid .stat-item {
    font-size: var(--font-size-sm);
}

.product-stats-grid .stat-label {
    color: var(--color-gray-600);
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-xs);
}

.product-stats-grid .stat-value {
    font-weight: 600;
    color: var(--color-gray-900);
}

/* Cohort Table */
.product-cohort-table {
    width: 100%;
    font-size: var(--font-size-sm);
}

.product-cohort-cell {
    padding: 0.75rem;
    text-align: center;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.product-retention-high {
    background: var(--color-green-50);
    color: var(--color-green-700);
}

.product-retention-medium {
    background: var(--color-yellow-50);
    color: var(--color-yellow-700);
}

.product-retention-low {
    background: var(--color-red-50);
    color: var(--color-red-700);
}

/* Trend Indicators */
.product-trend-up {
    color: var(--color-green-600);
}

.product-trend-down {
    color: var(--color-red-600);
}

.product-trend-stable {
    color: var(--color-gray-600);
}

/* Engagement Bar */
.product-engagement-bar {
    height: 8px;
    border-radius: var(--radius-sm);
    background: var(--color-gray-200);
    overflow: hidden;
    margin-top: var(--space-xs);
}

.product-engagement-fill {
    height: 100%;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-pink-600) 0%, var(--color-purple-600) 100%);
    transition: width 0.3s;
}

/* Segment Cards */
.product-segment-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--space-lg);
    transition: transform 0.2s;
}

.product-segment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========================================
   ANALYTICS DASHBOARD
   ======================================== */

/* Conversion Funnel */
.conversion-funnel {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: var(--radius-lg);
    gap: 1rem;
}

.funnel-step {
    flex: 1;
    text-align: center;
    padding: 1.5rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 150px;
    max-width: 200px;
}

.funnel-label {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.funnel-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

.funnel-percent {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.25rem;
    color: var(--color-success);
    font-weight: 600;
}

.funnel-arrow {
    font-size: 2rem;
    color: var(--color-primary);
    opacity: 0.6;
}

@media (max-width: 992px) {
    .conversion-funnel {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .funnel-arrow {
        display: none;
    }
}

/* Source Cards */
.source-card {
    background: var(--color-white);
    border-left: 4px solid var(--color-gray-300);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.stat-item {
    text-align: center;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--color-gray-600);
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

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

/* Page Cards */
.page-card {
    background: var(--color-white);
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    height: 100%;
}

/* Keyword Cards */
.keyword-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.keyword-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Call Log Items */
.call-log-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--color-gray-100);
    transition: background 0.2s ease;
}

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

.call-log-item:hover {
    background: var(--color-gray-50);
}

.call-log-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .call-log-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .call-log-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   COMPETITIVE INTELLIGENCE DASHBOARD
   ======================================== */

/* Competitor Cards */
.competitor-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    border-left: 4px solid;
    transition: transform 0.2s;
}

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

.competitor-metrics {
    margin-top: 1rem;
}

.competitor-metric {
    text-align: center;
    padding: 0.75rem 0.5rem;
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.competitor-metric-label {
    font-size: 0.75rem;
    color: var(--color-gray-600);
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.25rem;
}

.competitor-metric-value {
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
}

/* Rank Badges */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: var(--font-weight-bold);
    font-size: 0.875rem;
    color: var(--color-white);
}

.rank-badge.rank-1 {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.rank-badge.rank-2 {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}

.rank-badge.rank-3 {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.rank-badge.rank-other {
    background: var(--color-gray-500);
}

/* SWOT Grid */
.swot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    height: 100%;
}

.swot-quadrant {
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 2px solid;
}

.swot-strengths {
    background: rgba(16, 185, 129, 0.05);
    border-color: var(--color-success);
}

.swot-weaknesses {
    background: rgba(239, 68, 68, 0.05);
    border-color: var(--color-danger);
}

.swot-opportunities {
    background: rgba(59, 130, 246, 0.05);
    border-color: var(--color-info);
}

.swot-threats {
    background: rgba(245, 158, 11, 0.05);
    border-color: var(--color-warning);
}

.swot-header {
    font-weight: var(--font-weight-bold);
    font-size: 0.875rem;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.swot-strengths .swot-header {
    color: var(--color-success);
}

.swot-weaknesses .swot-header {
    color: var(--color-danger);
}

.swot-opportunities .swot-header {
    color: var(--color-info);
}

.swot-threats .swot-header {
    color: var(--color-warning);
}

.swot-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.swot-list li {
    padding: 0.5rem 0;
    padding-left: 1.25rem;
    position: relative;
}

.swot-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    font-weight: var(--font-weight-bold);
    font-size: 1.25rem;
}

.swot-strengths .swot-list li::before {
    color: var(--color-success);
}

.swot-weaknesses .swot-list li::before {
    color: var(--color-danger);
}

.swot-opportunities .swot-list li::before {
    color: var(--color-info);
}

.swot-threats .swot-list li::before {
    color: var(--color-warning);
}

/* Responsive SWOT Grid */
@media (max-width: 768px) {
    .swot-grid {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   MARKETING DEMO STYLES
   Brand Colors:
   - Primary: #14213D (Navy)
   - Accent: #3B82F6 (Blue)
   - Secondary: #0A192F (Dark Navy)
   - Off-White: #E5E7EB
   ======================================== */

/* Demo Header */
.demo-header {
    background: linear-gradient(135deg, #14213D 0%, #0A192F 100%);
    color: white;
    padding: 2rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 40px rgba(20, 33, 61, 0.3);
}

.demo-timer {
    background: rgba(59, 130, 246, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

/* CTA Button */
.cta-sticky {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.cta-button {
    background: linear-gradient(135deg, #3B82F6 0%, #14213D 100%);
    border: none;
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5);
    color: white;
}

/* Vacant Units Input */
.vacant-units-input {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    text-align: center;
}

.vacant-units-input .row {
    justify-content: center;
}

.unit-input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.unit-input {
    width: 100px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    border: 2px solid #E5E7EB;
    border-radius: 0.375rem;
    padding: 0.5rem;
}

.unit-input:focus {
    border-color: #3B82F6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Demo Footer */
.demo-footer {
    background: linear-gradient(135deg, #14213D 0%, #0A192F 100%);
    color: white;
    padding: 3rem 0;
    margin-top: 4rem;
    width: 100%;
}

.demo-footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.demo-footer h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: white;
}

.demo-footer p {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
    color: white;
}

.demo-footer-cta {
    display: inline-block;
    background: #3B82F6;
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.demo-footer-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5);
    background: #2563EB;
    color: white;
}

.demo-footer-powered {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    opacity: 0.8;
    font-size: 0.875rem;
}

/* Powered By Section */
.powered-by {
    text-align: center;
    padding: 2rem 0;
    color: #6b7280;
    font-size: 0.875rem;
}

.powered-by-logo {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #3B82F6 0%, #14213D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Demo Body Styles */
body.demo-page {
    background: #f9fafb;
    padding-bottom: 0;
    margin: 0;
}

.demo-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .demo-container {
        padding: 1rem;
    }

    .demo-header {
        padding: 1.5rem;
    }

    .demo-header h1 {
        font-size: 1.5rem;
    }

    .demo-timer {
        font-size: 0.875rem;
    }

    .vacant-units-input {
        padding: 1rem;
    }

    .unit-input-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .cta-sticky {
        bottom: 10px;
        right: 10px;
        left: 10px;
    }

    .cta-button {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .demo-footer h3 {
        font-size: 1.25rem;
    }

    .demo-footer-cta {
        display: block;
        text-align: center;
    }
}

@media (max-width: 991.98px) {
  .alert .row.g-4 {
    flex-direction: column !important;
  }
  .alert .col-12.col-md-3.col-lg-2,
  .alert .col-12.col-md-9.col-lg-10 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  #lossToLeaseChart {
    min-height: 360px !important;
  }
}

/* Demo page — mobile table fixes
   On small screens the .table-card and .table-responsive each contribute
   1.5rem of horizontal padding, pushing the table ~48px in from the card
   edge. The block below collapses that doubled padding, lets headers wrap,
   and tightens cell padding so tables can actually use the full width. */
@media (max-width: 768px) {
    body.demo-page .demo-container {
        padding: 0.75rem;
    }

    body.demo-page .table-card {
        padding: 0;
        margin-bottom: 1rem;
    }

    body.demo-page .table-header {
        padding: 0.875rem 1rem;
    }

    body.demo-page .table-card > .table-responsive,
    body.demo-page .table-responsive {
        padding: 0 0.5rem 1rem 0.5rem;
        -webkit-overflow-scrolling: touch;
    }

    body.demo-page .dashboard-table {
        font-size: 0.8125rem;
    }

    body.demo-page .dashboard-table thead th {
        padding: 0.5rem 0.4rem;
        white-space: normal;
        line-height: 1.25;
    }

    body.demo-page .dashboard-table tbody td {
        padding: 0.5rem 0.4rem;
    }

    body.demo-page .dashboard-table .badge {
        font-size: 0.7rem;
        white-space: normal;
    }

    /* Tab buttons sit closer together so the bedroom-type tabs fit */
    body.demo-page #competitorTabs .nav-link {
        padding: 0.5rem 0.6rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    body.demo-page .demo-container {
        padding: 0.5rem;
    }

    body.demo-page .table-header {
        padding: 0.75rem 0.875rem;
        font-size: 0.95rem;
    }

    body.demo-page .table-card > .table-responsive,
    body.demo-page .table-responsive {
        padding: 0 0.375rem 0.875rem 0.375rem;
    }

    body.demo-page .dashboard-table {
        font-size: 0.78rem;
    }

    body.demo-page .dashboard-table thead th,
    body.demo-page .dashboard-table tbody td {
        padding: 0.45rem 0.3rem;
    }
}

/* ========================================
   ADMIN EDITOR COMPONENTS
   WordPress-like editor layout
   ======================================== */

/* Editor wrapper - main content area */
.editor-wrapper {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.editor-body {
    padding: var(--space-lg);
}

/* Title input - large and prominent */
.editor-title-input {
    font-size: 1.75rem;
    font-weight: 600;
    border: none;
    padding: 0;
    width: 100%;
}

.editor-title-input:focus {
    box-shadow: none;
    outline: none;
}

/* Content editor textarea */
.content-editor {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 400px;
    height: calc(100vh - 350px);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
}

.content-editor:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(6, 182, 212, 0.25);
}

/* Full-page editor layout */
.editor-full-page {
    max-width: none !important;
}

.editor-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.editor-wrapper .editor-body:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.editor-wrapper .editor-body:last-child .content-editor {
    flex: 1;
}

/* Meta boxes - collapsible sidebar sections */
.meta-box {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-md);
    overflow: hidden;
}

.meta-box-header {
    background: var(--color-gray-50);
    padding: 0.75rem var(--space-md);
    font-weight: 600;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid var(--color-gray-200);
    transition: background-color 0.2s ease;
}

.meta-box-header:hover {
    background: var(--color-gray-100);
}

.meta-box-header iconify-icon {
    font-size: 1rem;
}

.meta-box-header .meta-box-chevron {
    transition: transform 0.2s ease;
}

.meta-box.collapsed .meta-box-chevron {
    transform: rotate(-90deg);
}

.meta-box-body {
    padding: var(--space-md);
    border-top: none;
}

.meta-box.collapsed .meta-box-body {
    display: none;
}

/* Status badge in meta box */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.published {
    background: var(--color-success);
    color: var(--color-white);
}

.status-badge.draft {
    background: var(--color-warning);
    color: var(--color-gray-900);
}

.status-badge.archived {
    background: var(--color-gray-400);
    color: var(--color-white);
}

/* Editor top bar */
.editor-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.editor-topbar h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.editor-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.save-status {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.save-status iconify-icon {
    font-size: 1rem;
}

.save-status.saved iconify-icon {
    color: var(--color-success);
}

.save-status.unsaved iconify-icon {
    color: var(--color-warning);
}

/* Preview modal styles */
.preview-content {
    color: var(--color-gray-600);
    font-size: 1rem;
    line-height: 1.8;
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--space-lg);
    background: var(--color-white);
}

.preview-content h1,
.preview-content h2,
.preview-content h3,
.preview-content h4,
.preview-content h5,
.preview-content h6 {
    color: var(--color-gray-900);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.preview-content figure {
    margin: 2rem auto;
    text-align: center;
    max-width: 100%;
}

.preview-content figure img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.preview-content figcaption {
    text-align: center;
    color: var(--color-gray-500);
    font-style: italic;
    margin-top: 0.75rem;
    font-size: 0.9em;
}

.preview-content table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
}

.preview-content table th,
.preview-content table td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-gray-300);
    text-align: left;
}

.preview-content table th {
    background: var(--color-gray-50);
    font-weight: 600;
}

.preview-content pre {
    background: #1e1e1e;
    border-radius: var(--radius-lg);
    padding: 1rem;
    overflow-x: auto;
    color: #f9fafb;
}

.preview-content code {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
}

.preview-content .admonition {
    padding: 1.25rem;
    margin: 1.5rem 0;
    border-left: 5px solid;
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
}

.preview-content .admonition.note {
    border-color: var(--color-info);
    background: linear-gradient(to right, #e7f1ff 0%, var(--color-gray-50) 100%);
}

.preview-content .admonition.warning {
    border-color: var(--color-warning);
    background: linear-gradient(to right, #fff8e1 0%, var(--color-gray-50) 100%);
}

.preview-content .admonition-title {
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-transform: capitalize;
}

/* Responsive adjustments for editor */
@media (max-width: 991.98px) {
    .editor-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .editor-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 767.98px) {
    .editor-title-input {
        font-size: 1.5rem;
    }

    .content-editor {
        min-height: 300px;
        height: calc(100vh - 400px);
    }

    .meta-box-body {
        padding: var(--space-sm);
    }
}

@media (min-width: 1600px) {
    .content-editor {
        height: calc(100vh - 300px);
    }
}