/* Dashboard Components - Dashboard-Specific UI Elements */
/* These are specialized patterns for dashboard visualizations (KPIs, charts, activity feeds)
   that complement the atomic design system but are specific to dashboard rendering.
   
   For general UI components, use the atomic system:
   - Buttons: styles/atoms/Button
   - Badges: styles/atoms/Badge  
   - Progress: styles/atoms/ProgressBar
   - Cards: styles/organisms/Card
   - Modals: styles/organisms/Modal
   - Forms: styles/base/forms.css
   
   Dashboard-specific patterns here:
   - .metric-card - KPI display cards (used by DashboardModule.createMetricCard)
   - .activity-item - Live feed items
   - .priority-badge - Task priority indicators
   - .chart-* - Chart visualization elements
   - .property-matrix - Multi-property comparison grids
*/

/* ===================================
   METRIC CARDS
   NOTE: For new code, prefer molecules/MetricCard/MetricCard.css
   These legacy classes kept for backwards compatibility
   =================================== */

.metric-card {
    background: var(--bg-surface);
    border-radius: var(--border-radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    border: var(--border-width-1) solid var(--border-subtle);
    transition: all var(--duration-200) var(--easing-out);
}

.metric-card.interactive:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

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

.metric-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
    flex: 1;
}

.metric-value {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.metric-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.metric-subtitle {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.metric-trend {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
}

/* ===================================
   DATA ROWS & TABLES
   =================================== */

.section-content div.data-table .data-row,
.category-services-grid div.data-table .data-row {
    display: grid;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--duration-200) var(--easing-out);
    min-height: var(--space-8);
    gap: var(--space-3);
}

.section-content div.data-table .data-row.interactive,
.category-services-grid div.data-table .data-row.interactive {
    cursor: pointer;
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-sm);
}

.section-content div.data-table .data-row.interactive:hover,
.category-services-grid div.data-table .data-row.interactive:hover {
    background: var(--bg-layer-2);
}

.section-content div.data-table .data-row.header,
.category-services-grid div.data-table .data-row.header {
    background: var(--bg-layer-2);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    border-bottom: var(--border-width-2) solid var(--border-subtle);
    margin-bottom: var(--space-3);
}

.data-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.data-cell {
    font-weight: 500;
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.data-status {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
}

/* Badge backgrounds for data-status */
.data-status.status-excellent,
.data-status.status-good {
    background: rgba(34, 197, 94, 0.1);
}

.data-status.status-fair {
    background: rgba(245, 158, 11, 0.1);
}

.data-status.status-poor {
    background: rgba(220, 38, 38, 0.1);
}

.section-content div.data-table.table-4-col .data-row {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-3);
}

.section-content div.data-table.table-5-col .data-row {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: var(--space-3);
}

.section-content div.data-table.table-auto .data-row {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
}

/* ===================================
   ACTIVITY ITEMS
   NOTE: For new code, prefer molecules/ActivityItem/ActivityItem.css
   These legacy classes kept for backwards compatibility
   =================================== */

.activity-item {
    background: var(--bg-surface);
    border-radius: var(--border-radius-sm);
    padding: var(--space-3);
    box-shadow: var(--shadow-sm);
    border: var(--border-width-1) solid var(--border-subtle);
    transition: all var(--duration-200) var(--easing-out);
}

.activity-item.interactive {
    cursor: pointer;
}

.activity-item.interactive:hover {
    background: var(--bg-layer-2);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.activity-time {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.activity-type {
    padding: var(--space-0_5) var(--space-2);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.activity-content {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

/* ===================================
   STATUS & STATE SYSTEMS
   =================================== */

/* Base status classes - color only */
.status-excellent { color: var(--color-success); font-weight: 600; }
.status-good { color: var(--color-success); }
.status-fair { color: var(--color-warning); font-weight: 600; }
.status-poor { color: var(--color-error); font-weight: 600; }

/* Legacy trend classes - for new code, use atoms/TrendIndicator */
.trend-up { color: var(--color-success); }
.trend-down { color: var(--color-error); }
.trend-neutral { color: var(--text-muted); }

.trend-up::before { content: "↗"; margin-right: var(--space-2); }
.trend-down::before { content: "↘"; margin-right: var(--space-2); }
.trend-neutral::before { content: "→"; margin-right: var(--space-2); }

.alert-high .activity-type { background: var(--color-error); color: white; }
.alert-medium .activity-type { background: var(--color-warning); color: white; }
.alert-low .activity-type { background: var(--color-info); color: white; }

.interactive { cursor: pointer; }
.clickable { cursor: pointer; }
.disabled { 
    opacity: 0.5; 
    cursor: not-allowed; 
    pointer-events: none; 
}

.size-sm { 
    padding: var(--space-3); 
    font-size: var(--text-sm); 
}
.size-md { 
    padding: var(--space-4); 
    font-size: var(--text-base); 
}
.size-lg { 
    padding: var(--space-4); 
    font-size: var(--text-lg); 
}

/* ===================================
   PROGRESS BARS (inline dashboard progress)
   NOTE: This is a simpler inline pattern for dashboards/modules.
   For the full atomic component, use atoms/ProgressBar (.progress-bar-wrapper)
   =================================== */

.progress-container {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.progress-bar {
    flex: 1;
    height: var(--space-1_5);
    background: var(--border-subtle);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--border-radius-sm);
    transition: width 0.3s var(--easing-out);
}

.progress-text {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    min-width: var(--space-9);
}

/* ===================================
   LIVE INDICATORS
   NOTE: For new code, prefer atoms/LiveIndicator/LiveIndicator.css
   These legacy classes kept for backwards compatibility
   =================================== */

.live-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-error);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ===================================
   CHART ELEMENTS
   NOTE: For new code, prefer atoms/ChartBar/ChartBar.css
   These legacy classes kept for backwards compatibility
   =================================== */

.chart-bar {
    height: var(--space-6);
    background: var(--bg-layer-2);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    position: relative;
}

.chart-fill {
    height: 100%;
    border-radius: var(--border-radius-sm);
    transition: width 0.3s var(--easing-out);
}

.chart-fill.primary { background: var(--color-primary); }
.chart-fill.secondary { background: var(--color-secondary); }
.chart-fill.success { background: var(--color-success); }
.chart-fill.warning { background: var(--color-warning); }
.chart-fill.error { background: var(--color-error); }
.chart-fill.info { background: var(--color-info); }

/* ===================================
   FORM LAYOUT (dashboard-specific forms)
   NOTE: Base input styles in base/forms.css
   =================================== */

/* 
   SPACING CONTRACT: .form-section has no external margins
   Parent containers control spacing via gap
   See: styles/molecules/FormSection/FormSection.css
*/

/* Form containers - use gap for spacing between form-sections */
.request-form,
.user-form,
#profile-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);  /* Parent controls spacing between sections */
}

.request-form {
    max-width: 100%;
}

/* Legacy h3 styling for backwards compatibility with raw HTML form-sections */
.form-section h3 {
    margin: 0 0 var(--space-4) 0;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: var(--border-width-1) solid var(--border-subtle);
    padding-bottom: var(--space-3);
}

.input-group {
    margin-bottom: var(--space-4);
}

.input-group label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-width-1) solid var(--border-subtle);
    margin-top: var(--space-6);
}

/* Read-only fields */
.read-only-field {
    background: var(--bg-layer-2);
    color: var(--text-muted);
    cursor: not-allowed;
}

.read-only-field:focus {
    border-color: var(--border-medium);
    box-shadow: none;
}

/* ===================================
   PRIORITY BADGES
   =================================== */

.priority-badge {
    padding: var(--space-px) var(--space-1_5);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
}

.priority-badge.high {
    background: var(--color-error);
    color: var(--bg-white);
}

.priority-badge.normal {
    background: var(--color-info);
    color: var(--bg-white);
}

.priority-badge.low {
    background: var(--color-secondary);
    color: var(--bg-white);
}

.priority-badge.urgent {
    background: var(--color-error);
    color: var(--bg-white);
    animation: pulse 2s infinite;
}

/* ===================================
   META TEXT
   =================================== */

.meta-text {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-right: var(--space-4);
}

/* ===================================
   PROPERTY MATRIX
   =================================== */

.property-matrix {
    width: 100%;
    overflow: hidden;
}

.matrix-container {
    overflow-x: auto;
    overflow-y: visible;
    position: relative;
}

.matrix-value {
    font-weight: 600;
    display: inline-block;
}

.metric-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

/* ===================================
   COMPACT METRICS ROW
   =================================== */

.compact-metrics-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    flex-wrap: wrap;
}

.compact-metric {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.compact-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.compact-value {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.compact-variance {
    font-size: var(--text-sm);
    font-weight: 600;
    margin-left: var(--space-2);
}

.compact-separator {
    color: var(--text-muted);
    font-weight: 300;
    margin: 0 var(--space-2);
}

.compact-note {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
    margin-left: var(--space-3);
}

/* ===================================
   OPERATIONAL OVERVIEW
   Hotel-tab three-column layout: Current | Last 7d | Last 30d.
   All three columns stretch to the same height (grid align-items: stretch).
   Chart wraps and KPI cards both use flex:1 to fill the column below the title,
   so the four stacked cards collectively match the height of a single chart.
   =================================== */

.op-hotel-grid {
    display: grid;
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: var(--space-4);
    align-items: stretch;
}

.op-hotel-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.op-col-title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    margin: 0;
}

/* Current column: 4 cards share the remaining column height equally. */
.op-current-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Cards take their natural single-line height; the column height is the sum
   of all four cards plus gaps. The chart column then stretches to match via
   grid align-items: stretch. */
.op-current-grid > .kpi-card {
    flex: 0 0 auto;
}

/* Single-line variant of KPICard: label on the left, value on the right.
   Applied via customClass: 'op-stat-row' in OperationalOverview. */
.kpi-card.op-stat-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.kpi-card.op-stat-row .kpi-card-header {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.kpi-card.op-stat-row .kpi-card-title {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
}

.kpi-card.op-stat-row .kpi-card-body {
    margin: 0;
    text-align: right;
}

.kpi-card.op-stat-row .kpi-card-value {
    font-size: var(--text-lg);
    line-height: 1;
    font-weight: var(--font-weight-bold);
}

/* Chart-column header: title on the left, custom legend on the right. */
.op-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.op-chart-legend {
    display: flex;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.op-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.op-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.op-legend-reported .op-legend-dot { background: var(--color-info); }
.op-legend-closed .op-legend-dot   { background: var(--color-primary); }
.op-legend-bookings .op-legend-dot { background: var(--color-info); }
.op-legend-covers .op-legend-dot   { background: var(--color-primary); }

/* Vertical stack of panels within a tab (e.g. Repairs + À La Carte). */
.op-panel-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Chart column: fills the column height, which is driven by the natural
   stacked-card height in the sibling column. */
.op-chart-wrap {
    flex: 1;
    position: relative;
    min-height: 0;
}

/* Standard Chart.js responsive pattern: canvas absolutely positioned so it
   doesn't push the parent's natural size up, letting the cards-column drive
   the row height. */
.op-chart-wrap > canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 900px) {
    .op-hotel-grid {
        grid-template-columns: 1fr;
    }
    .op-hotel-col {
        min-height: 0;
    }
    .op-chart-wrap {
        min-height: 280px;
    }
}