/* Device Card Component - PCS Design System */

/* Wrapper */
.group-device-card-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
}

/* Card Base - Match pcs-card styling */
.group-device-card {
    background: linear-gradient(135deg, var(--pcs-surface) 0%, var(--pcs-surface-tertiary) 100%);
    border-radius: var(--pcs-radius-lg);
    border: 1px solid var(--pcs-border);
    padding: var(--pcs-space-md, 16px);
    cursor: pointer;
    transition: all var(--pcs-transition-base);
    box-shadow: var(--pcs-shadow-sm);
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.group-device-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pcs-shadow-lg);
}

/* Status Border Variants */
.group-device-card.status-normal {
    border-left: 4px solid var(--pcs-color-success, #28a745);
}

.group-device-card.status-inspection {
    border-left: 4px solid var(--pcs-color-warning, #ffc107);
}

.group-device-card.status-failure {
    border-left: 4px solid var(--pcs-color-danger, #dc3545);
}

.group-device-card.status-offline {
    border-left: 4px solid var(--dxds-color-content-neutral-disabled-rest);
}

/* Stale Data Badge */
.stale-data-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--pcs-color-warning, #ffc107);
    color: var(--dxds-color-content-neutral-default-static-dark-rest);
    padding: 4px 8px;
    border-radius: var(--pcs-radius-sm, 4px);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
}

/* Header Section */
.card-header-section {
    margin-bottom: var(--pcs-space-md, 16px);
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
    padding-bottom: var(--pcs-space-sm, 8px);
}

.device-name-line {
    font-size: var(--pcs-text-lg, 18px);
    font-weight: 600;
    color: var(--dxds-color-content-neutral-default-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.device-location-line {
    font-size: var(--pcs-text-sm, 14px);
    color: var(--dxds-color-content-neutral-secondary-rest);
    display: flex;
    align-items: center;
}

/* Body Section */
.card-body-section {
    display: flex;
    flex-direction: column;
    gap: var(--pcs-space-md, 16px);
    flex: 1;
}

/* Floor & Movement Row */
.floor-movement-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--pcs-space-sm, 8px);
    background: var(--dxds-color-surface-elevated);
    border-radius: var(--pcs-radius-sm, 4px);
}

.floor-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.floor-label-small {
    font-size: 11px;
    color: var(--dxds-color-content-neutral-secondary-rest);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.floor-value-large {
    font-size: 28px;
    font-weight: 700;
    color: var(--dxds-color-content-neutral-default-rest);
    line-height: 1;
}

.floor-system-small {
    font-size: 10px;
    color: var(--dxds-color-content-neutral-tertiary-rest);
}

.movement-indicator {
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Status Colors - CSS Variables */
.status-color-normal {
    color: var(--pcs-color-success, #28a745) !important;
}

.status-color-inspection {
    color: var(--pcs-color-warning, #ffc107) !important;
}

.status-color-failure {
    color: var(--pcs-color-danger, #dc3545) !important;
}

.status-color-offline {
    color: var(--dxds-color-content-neutral-disabled-rest) !important;
}

/* Detailed Status Row */
.detailed-status-row {
    display: flex;
    align-items: center;
    gap: var(--pcs-space-sm, 8px);
    padding: var(--pcs-space-xs, 4px) var(--pcs-space-sm, 8px);
    background: var(--dxds-color-surface-elevated);
    border-radius: var(--pcs-radius-sm, 4px);
    font-size: var(--pcs-text-sm, 14px);
    color: var(--dxds-color-content-neutral-default-rest);
}

/* Doors Section */
.doors-section {
    display: flex;
    flex-direction: column;
    gap: var(--pcs-space-sm, 8px);
}

.doors-label-row {
    font-size: var(--pcs-text-sm, 14px);
    font-weight: 600;
    color: var(--dxds-color-content-neutral-default-rest);
    display: flex;
    align-items: center;
}

.doors-grid-compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pcs-space-sm, 8px);
}

.door-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--pcs-space-xs, 4px);
    background: var(--dxds-color-surface-elevated);
    border-radius: var(--pcs-radius-sm, 4px);
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.door-letter-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--dxds-color-content-neutral-secondary-rest);
    background: var(--dxds-color-surface-default);
    padding: 2px 6px;
    border-radius: var(--pcs-radius-sm, 4px);
}

.door-img-compact {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.light-curtain-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: var(--pcs-color-danger, #dc3545);
    border-radius: 50%;
    border: 1px solid var(--dxds-color-surface-default);
}

/* Responsive */
@media (max-width: 768px) {
    .group-device-card {
        padding: var(--pcs-space-sm, 8px);
    }

    .device-name-line {
        font-size: var(--pcs-text-md, 16px);
    }

    .floor-value-large {
        font-size: 24px;
    }

    .movement-indicator {
        font-size: 28px;
    }

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