/* Dashboard-owned presentation for the Aplus PMS operational overview. */

.crm-page-dashboard {
    gap: var(--ui-space-5);
}

.crm-page-dashboard .dashboard-header {
    min-width: 0;
    align-items: center;
    padding: 18px 20px;
    gap: var(--ui-space-5);
    border-color: var(--ui-color-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-color-surface);
    box-shadow: none;
}

.crm-page-dashboard .dashboard-header > div {
    min-width: 0;
}

.crm-page-dashboard .dashboard-header .page-title-with-icon {
    color: var(--ui-color-text);
    font-size: var(--ui-font-page-title);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.crm-page-dashboard .dashboard-header .page-subtitle {
    max-width: 720px;
    margin-top: var(--ui-space-2);
    color: var(--ui-color-text-muted);
    font-size: var(--ui-font-body);
    line-height: 1.45;
}

.crm-page-dashboard .dashboard-object-filter {
    width: min(300px, 100%);
    min-width: min(300px, 100%);
}

.crm-page-dashboard .dashboard-object-filter .field-stack {
    display: grid;
    gap: var(--ui-space-1);
}

.crm-page-dashboard .dashboard-object-filter .field-stack > span {
    display: block;
    color: var(--ui-color-text-muted);
    font-size: var(--ui-font-xs);
    font-weight: 600;
}

.crm-page-dashboard .dashboard-object-filter select {
    min-height: var(--ui-control-lg);
    padding: 0 40px 0 12px;
    border-color: var(--ui-color-border);
    border-radius: var(--ui-radius-sm);
    background-color: var(--ui-color-surface-subtle);
    color: var(--ui-color-text);
    font-size: var(--ui-font-body);
    font-weight: 600;
    transition:
        border-color var(--ui-duration-fast) var(--ui-ease-standard),
        box-shadow var(--ui-duration-fast) var(--ui-ease-standard),
        background-color var(--ui-duration-fast) var(--ui-ease-standard);
}

.crm-page-dashboard .dashboard-object-filter select:hover {
    border-color: var(--ui-color-border-strong);
    background-color: var(--ui-color-surface);
}

.crm-page-dashboard .dashboard-object-filter select:focus-visible {
    border-color: var(--ui-color-primary);
    background-color: var(--ui-color-surface);
    box-shadow: var(--ui-focus-ring);
    outline: none;
}

.crm-page-dashboard .dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ui-space-3);
}

.crm-page-dashboard .dashboard-kpi {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    min-width: 0;
    padding: 16px;
    box-shadow: none;
}

.crm-page-dashboard .dashboard-kpi-icon {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: var(--ui-radius-md);
    background: var(--ui-color-primary-soft);
    color: var(--ui-color-primary);
}

.crm-page-dashboard .dashboard-kpi-icon svg { width: 20px; height: 20px; }
.crm-page-dashboard .dashboard-kpi--success .dashboard-kpi-icon { background: var(--ui-color-success-soft); color: var(--ui-color-success); }
.crm-page-dashboard .dashboard-kpi--warning .dashboard-kpi-icon { background: var(--ui-color-warning-soft); color: var(--ui-color-warning); }
.crm-page-dashboard .dashboard-kpi--danger .dashboard-kpi-icon { background: var(--ui-color-danger-soft); color: var(--ui-color-danger); }
.crm-page-dashboard .dashboard-kpi > div { display: grid; min-width: 0; gap: 2px; }
.crm-page-dashboard .dashboard-kpi span { color: var(--ui-color-text-muted); font-size: var(--ui-font-xs); font-weight: 600; overflow-wrap: anywhere; }
.crm-page-dashboard .dashboard-kpi strong { color: var(--ui-color-text); font-size: 24px; line-height: 1.1; }

.crm-page-dashboard .dashboard-analytics-panel {
    min-width: 0;
    padding: 18px 20px;
    box-shadow: none;
}

.crm-page-dashboard .dashboard-analytics-head h3 { margin: 0; color: var(--ui-color-text); font-size: var(--ui-font-section-title); }
.crm-page-dashboard .dashboard-analytics-head p { margin: 4px 0 0; color: var(--ui-color-text-muted); font-size: var(--ui-font-sm); }
.crm-page-dashboard .dashboard-chart-frame { position: relative; min-width: 0; height: 280px; margin-top: var(--ui-space-4); }
.crm-page-dashboard [data-dashboard-analytics-fallback] { margin-top: var(--ui-space-4); }
.crm-page-dashboard [data-dashboard-analytics-fallback][hidden] { display: none; }
.crm-page-dashboard .dashboard-analytics-data {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.crm-page-dashboard [data-dashboard-analytics-fallback]:not([hidden]) + .dashboard-analytics-data {
    position: static;
    width: auto;
    height: auto;
    margin: var(--ui-space-3) 0 0;
    overflow-x: auto;
    clip: auto;
    white-space: normal;
}
.crm-page-dashboard .dashboard-analytics-data table { width: 100%; border-collapse: collapse; }
.crm-page-dashboard .dashboard-analytics-data caption { padding: 0 0 var(--ui-space-2); color: var(--ui-color-text); font-weight: 600; text-align: left; }
.crm-page-dashboard .dashboard-analytics-data :is(th, td) { padding: 8px; border-bottom: 1px solid var(--ui-color-border); text-align: left; }
.crm-page-dashboard .dashboard-analytics-data thead th { color: var(--ui-color-text-muted); font-size: var(--ui-font-xs); text-transform: uppercase; }

.crm-page-dashboard .dashboard-operations-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--ui-space-4);
    min-width: 0;
}

.crm-page-dashboard .dashboard-operation-column {
    min-width: 0;
    min-height: 240px;
    padding: 12px;
    border-color: var(--ui-color-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-color-surface-subtle);
    box-shadow: none;
}

.crm-page-dashboard .dashboard-operation-head {
    min-width: 0;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-md);
}

.crm-page-dashboard .dashboard-operation-head > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.crm-page-dashboard .dashboard-operation-head span,
.crm-page-dashboard .dashboard-operation-head small {
    font-weight: 600;
}

.crm-page-dashboard .dashboard-operation-head span {
    color: var(--ui-color-text);
    font-size: var(--ui-font-xs);
    letter-spacing: 0.045em;
}

.crm-page-dashboard .dashboard-operation-head strong {
    color: var(--ui-color-text);
    font-size: 28px;
    font-weight: 600;
}

.crm-page-dashboard .dashboard-operation-head small {
    color: var(--ui-color-text-muted);
    font-size: var(--ui-font-xs);
    text-align: right;
}

.crm-page-dashboard [data-dashboard-stage="arrivals"] .dashboard-operation-head {
    border-color: #cfe0f5;
    background: var(--ui-color-info-soft);
}

.crm-page-dashboard [data-dashboard-stage="departures"] .dashboard-operation-head {
    border-color: #f1d6d3;
    background: var(--ui-color-danger-soft);
}

.crm-page-dashboard [data-dashboard-stage="staying"] .dashboard-operation-head {
    border-color: #cce8dd;
    background: var(--ui-color-success-soft);
}

.crm-page-dashboard .dashboard-operation-list {
    gap: var(--ui-space-2);
    min-width: 0;
}

.crm-page-dashboard .dashboard-operation-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ui-space-3);
    min-width: 0;
    padding: 12px;
    border-color: var(--ui-color-border);
    border-left-width: 3px;
    border-radius: var(--ui-radius-md);
    background: var(--ui-color-surface);
    box-shadow: none;
    transition:
        border-color var(--ui-duration-fast) var(--ui-ease-standard),
        box-shadow var(--ui-duration-fast) var(--ui-ease-standard);
}

.crm-page-dashboard [data-dashboard-stage="arrivals"] .dashboard-operation-card {
    border-left-color: var(--ui-color-info);
}

.crm-page-dashboard [data-dashboard-stage="departures"] .dashboard-operation-card {
    border-left-color: var(--ui-color-danger);
}

.crm-page-dashboard [data-dashboard-stage="staying"] .dashboard-operation-card {
    border-left-color: var(--ui-color-success);
}

.crm-page-dashboard .dashboard-operation-card:hover {
    border-color: var(--ui-color-border-strong);
    box-shadow: var(--ui-shadow-control);
}

.crm-page-dashboard .dashboard-operation-card > div {
    min-width: 0;
}

.crm-page-dashboard .dashboard-operation-card strong,
.crm-page-dashboard .dashboard-operation-card span,
.crm-page-dashboard .dashboard-operation-card small {
    overflow-wrap: anywhere;
}

.crm-page-dashboard .dashboard-operation-card strong {
    color: var(--ui-color-text);
    font-size: var(--ui-font-card-title);
    font-weight: 600;
    line-height: 1.3;
}

.crm-page-dashboard .dashboard-operation-card span:not(.dashboard-checkin-warning) {
    margin-top: 2px;
    color: var(--ui-color-text);
    font-size: var(--ui-font-body);
    font-weight: 600;
}

.crm-page-dashboard .dashboard-operation-card small {
    margin-top: 3px;
    color: var(--ui-color-text-muted);
    font-size: var(--ui-font-xs);
    line-height: 1.35;
}

.crm-page-dashboard .dashboard-operation-card .dashboard-source-line {
    color: var(--ui-color-text-muted);
}

.crm-page-dashboard .dashboard-operation-card .dashboard-checkin-warning {
    margin-top: 7px;
    padding: 3px 8px;
    border-color: #edc86d;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-color-warning-soft);
    color: var(--ui-color-warning);
    font-size: var(--ui-font-xs);
    font-weight: 600;
}

.crm-page-dashboard .dashboard-operation-card .row-link {
    min-height: 40px;
    padding: 0 12px;
    border-color: var(--ui-color-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-color-primary-soft);
    color: var(--ui-color-primary-active);
    font-size: var(--ui-font-sm);
    font-weight: 600;
    box-shadow: none;
}

.crm-page-dashboard .dashboard-operation-card .row-link:not(.danger):not(.messenger-button):not(.is-active):not([data-inventory-add-apartment-trigger]):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
    border-color: var(--ui-color-primary);
    background: var(--ui-color-primary-soft);
    color: var(--ui-color-primary);
}

.crm-page-dashboard .dashboard-operation-card .row-link:focus-visible {
    border-color: var(--ui-color-primary);
    box-shadow: var(--ui-focus-ring);
    outline: none;
}

.crm-page-dashboard .dashboard-empty-state {
    min-height: 96px;
    display: grid;
    place-items: center;
    padding: var(--ui-space-4);
    border-color: var(--ui-color-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-color-surface);
    color: var(--ui-color-text-muted);
    font-size: var(--ui-font-sm);
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
}

@media (max-width: 1100px) {
    .crm-page-dashboard .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .crm-page-dashboard .dashboard-operations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .crm-page-dashboard .dashboard-header {
        align-items: stretch;
        padding: 16px;
    }

    .crm-page-dashboard .dashboard-header .page-subtitle {
        display: none;
    }

    .crm-page-dashboard .dashboard-object-filter {
        width: 100%;
        min-width: 0;
    }

    .crm-page-dashboard .dashboard-kpi-grid { gap: var(--ui-space-2); }
    .crm-page-dashboard .dashboard-kpi { padding: 12px; }
    .crm-page-dashboard .dashboard-kpi-icon { flex-basis: 36px; width: 36px; height: 36px; }
    .crm-page-dashboard .dashboard-analytics-panel { padding: 16px; }
    .crm-page-dashboard .dashboard-chart-frame { height: 240px; }

    .crm-page-dashboard .dashboard-operations-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ui-space-3);
    }

    .crm-page-dashboard .dashboard-operation-column {
        min-height: 0;
        padding: 10px;
    }

    .crm-page-dashboard .dashboard-operation-card {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .crm-page-dashboard .dashboard-operation-card .row-link {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crm-page-dashboard .dashboard-object-filter select,
    .crm-page-dashboard .dashboard-operation-card {
        transition: none;
    }
}