/* UX-004 Admin Overview — screen-specific composition using UX/UI v1.0 tokens. */

.hp-overview {
    display: grid;
    gap: var(--hp-space-8);
}

.hp-overview .hp-btn,
.hp-overview-action {
    min-height: var(--hp-touch-target);
}

.hp-overview-role {
    text-transform: capitalize;
}

.hp-overview-header,
.hp-overview-section__heading,
.hp-overview-stat__top,
.hp-overview-property__heading {
    align-items: flex-start;
    display: flex;
    gap: var(--hp-space-3);
    justify-content: space-between;
}

.hp-overview-header h1,
.hp-overview-header p,
.hp-overview-section h2,
.hp-overview-section h3,
.hp-overview-section p {
    margin: 0;
}

.hp-overview-header p,
.hp-overview-section__heading p,
.hp-overview-stat__top + h3 + p,
.hp-overview-property__location,
.hp-overview-property__owner {
    color: var(--hp-text-secondary);
}

.hp-overview-eyebrow {
    color: var(--hp-sage-500);
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-block-end: var(--hp-space-1);
    text-transform: uppercase;
}

.hp-overview-section {
    display: grid;
    gap: var(--hp-space-4);
    margin: 0;
}

.hp-overview-attention {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-inline-start: 4px solid var(--hp-terra-500);
    border-radius: var(--hp-radius-m);
    list-style: none;
    margin: 0;
    padding: 0;
}

.hp-overview-attention__item {
    align-items: center;
    display: grid;
    gap: var(--hp-space-4);
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--hp-space-4);
}

.hp-overview-attention__item + .hp-overview-attention__item {
    border-top: 1px solid var(--hp-border);
}

.hp-overview-attention__icon,
.hp-overview-stat__icon,
.hp-overview-action__icon,
.hp-overview-property__mark {
    align-items: center;
    background: var(--hp-sand-100);
    border-radius: var(--hp-radius-s);
    color: var(--hp-green-900);
    display: inline-flex;
    flex: 0 0 auto;
    height: var(--hp-touch-target);
    justify-content: center;
    width: var(--hp-touch-target);
}

.hp-overview-attention__copy {
    display: grid;
    gap: var(--hp-space-1);
}

.hp-overview-attention__copy p {
    color: var(--hp-text-secondary);
    font-size: 0.875rem;
}

.hp-overview-attention__heading {
    justify-content: flex-start;
}

.hp-overview-stats {
    display: grid;
    gap: var(--hp-space-4);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hp-overview-stats .hp-stat-card {
    min-height: 9.5rem;
}

.hp-overview-stat__top {
    align-items: center;
}

.hp-overview-stat__top + h3 {
    font-size: 0.9375rem;
}

.hp-overview-stat__top + h3 + p {
    font-size: 0.75rem;
    line-height: 1.45;
}

.hp-overview-columns {
    align-items: start;
    display: grid;
    gap: var(--hp-space-4);
    grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 0.75fr);
}

.hp-overview-columns--single {
    grid-template-columns: minmax(0, 28rem);
}

.hp-overview-columns > .hp-card {
    padding: var(--hp-space-5);
}

.hp-overview-timeline {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hp-overview-timeline__item {
    align-items: start;
    display: grid;
    gap: var(--hp-space-3);
    grid-template-columns: auto 4.5rem minmax(0, 1fr);
    padding-block: var(--hp-space-3);
    position: relative;
}

.hp-overview-timeline__item + .hp-overview-timeline__item {
    border-top: 1px solid var(--hp-border);
}

.hp-overview-timeline__marker {
    background: var(--hp-sage-500);
    border: 3px solid var(--hp-sand-100);
    border-radius: 50%;
    height: 14px;
    margin-block-start: 3px;
    width: 14px;
}

.hp-overview-timeline__marker[data-event-type="cleaning"] {
    background: var(--hp-terra-500);
}

.hp-overview-timeline__marker[data-event-type="checkin"] {
    background: var(--hp-success);
}

.hp-overview-timeline__item time {
    color: var(--hp-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.hp-overview-timeline__item div {
    display: grid;
    gap: var(--hp-space-1);
}

.hp-overview-timeline__item span {
    color: var(--hp-text-secondary);
    font-size: 0.8125rem;
}

.hp-overview-actions {
    display: grid;
    gap: var(--hp-space-2);
}

.hp-overview-action {
    align-items: center;
    color: var(--hp-text);
    cursor: pointer;
    flex-direction: row;
    font: inherit;
    min-height: var(--hp-touch-target);
    text-align: start;
    width: 100%;
}

.hp-overview-action span:nth-child(2) {
    flex: 1;
    font-weight: 600;
}

.hp-overview-action:hover {
    background: var(--hp-sand-100);
}

.hp-overview-action:focus-visible {
    outline: 3px solid var(--hp-blue-400);
    outline-offset: 2px;
}

.hp-overview-properties {
    display: grid;
    gap: var(--hp-space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hp-overview-property {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
}

.hp-overview-property__body {
    display: grid;
    gap: var(--hp-space-2);
}

.hp-overview-property__heading {
    align-items: center;
}

.hp-overview-property__location {
    align-items: center;
    display: flex;
    font-size: 0.8125rem;
    gap: var(--hp-space-2);
}

.hp-overview-property__event {
    font-size: 0.875rem;
}

.hp-overview-property__owner {
    font-size: 0.8125rem;
}

.hp-overview-occupancy {
    background: var(--hp-sand-100);
    border-radius: var(--hp-radius-s);
    display: grid;
    gap: var(--hp-space-1);
    padding: var(--hp-space-2);
}

.hp-overview-occupancy__heading {
    align-items: center;
    gap: var(--hp-space-2);
}

.hp-overview-occupancy__heading > span:not(.hp-status-chip),
.hp-overview-occupancy p {
    font-size: 0.75rem;
}

.hp-overview-occupancy__heading > span:not(.hp-status-chip) {
    color: var(--hp-green-900);
    font-weight: 700;
}

.hp-overview-property__pockets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hp-space-1);
}

.hp-overview-empty {
    background: var(--hp-surface);
    border: 1px dashed var(--hp-beige-300);
    border-radius: var(--hp-radius-m);
    min-height: 9rem;
}

.hp-overview-loading {
    display: grid;
    gap: var(--hp-space-6);
}

.hp-overview-loading__heading {
    height: 4rem;
    max-width: 28rem;
}

.hp-overview-loading__card {
    height: 9.5rem;
}

.hp-overview-loading__panel {
    height: 16rem;
}

@media (max-width: 1199px) {
    .hp-overview-stats,
    .hp-overview-properties {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hp-overview-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .hp-overview {
        gap: var(--hp-space-6);
    }

    .hp-overview-header,
    .hp-overview-section__heading {
        align-items: flex-start;
    }

    .hp-overview-attention__item {
        align-items: start;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .hp-overview-attention__item > .hp-btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .hp-overview-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hp-overview-properties {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 420px) {
    .hp-overview-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .hp-overview-header {
        flex-direction: column;
    }

    .hp-overview-timeline__item {
        grid-template-columns: auto 3.75rem minmax(0, 1fr);
    }
}